前端实现Excel导入导出功能：代码示例与解析

在前端开发中，经常需要与Excel文件进行交互，例如将网页数据导出为Excel表格，或将Excel文件导入网页进行数据处理。本文将介绍如何使用JavaScript库XLSX实现前端Excel文件导入和导出功能，并提供具体的代码示例。

导入Excel文件

// 导入Excel文件
function importExcel(file) {
  var reader = new FileReader();
  reader.onload = function (e) {
    var data = e.target.result;
    var workbook = XLSX.read(data, { type: 'binary' });
    workbook.SheetNames.forEach(function (sheetName) {
      var sheet = workbook.Sheets[sheetName];
      // 获取表格数据
      var json = XLSX.utils.sheet_to_json(sheet);
      console.log(json);
    });
  };
  reader.readAsBinaryString(file);
}

导出Excel文件

// 导出Excel文件
function exportExcel() {
  // 创建表格数据
  var data = [['姓名', '年龄', '性别'], ['小明', 18, '男'], ['小红', 20, '女'], ['小刚', 22, '男']];
  var ws = XLSX.utils.aoa_to_sheet(data);
  // 创建工作簿
  var wb = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
  // 保存文件
  XLSX.writeFile(wb, 'test.xlsx');
}

代码解析:

导入Excel文件：
- 使用FileReader读取文件内容；
- 使用XLSX.read将文件内容解析为工作簿对象；
- 遍历工作簿中的所有工作表；
- 使用XLSX.utils.sheet_to_json将工作表数据转换为JSON格式；
导出Excel文件：
- 创建一个二维数组表示表格数据；
- 使用XLSX.utils.aoa_to_sheet将二维数组转换为工作表对象；
- 创建一个新的工作簿对象；
- 将工作表对象添加到工作簿对象中；
- 使用XLSX.writeFile将工作簿对象保存为Excel文件。

注意:

为了使用XLSX库，需要先引入相应的JS文件。
导入Excel文件时，需要用户选择要导入的Excel文件。
导出Excel文件时，需要指定要保存的文件名和路径。

通过以上代码示例，您可以轻松地实现前端Excel文件导入和导出功能，并根据您的具体需求进行修改和扩展。