使用纯前端JavaScript实现Excel导入导出方法过程详解

使用纯前端JavaScript实现Excel导入导出方法可以让用户方便地在浏览器中处理Excel文件，方便快捷，本文将详细讲解该过程。

实现Excel导入

前提条件

实现Excel导入，需要先在HTML代码中添加一个文件上传的input元素，例如：

<input type="file" id="fileInput">

读取Excel文件

使用JavaScript的File API可以获取上传的Excel文件。代码示例：

const fileInput = document.getElementById('fileInput');
const file = fileInput.files[0];
const reader = new FileReader();

reader.onload = function (e) {
  const data = e.target.result;
  const workbook = XLSX.read(data, {type: 'binary'});
  const sheet1 = workbook.Sheets['Sheet1'];
  // 读取第一个单元格(A1)的值
  const value1 = sheet1['A1'].v;
  console.log(value1); // 输出A1单元格的值
}

reader.readAsBinaryString(file);

这里使用了第三方库XLSX来读取Excel文件。XLSX使用了标准的Excel文件格式（.xlsx），不支持旧版本的Excel文件（.xls）。

解析Excel数据

读取Excel文件后，可以通过遍历Sheet中的单元格来获取Excel数据。代码示例：

// 遍历Sheet中所有单元格
for (const cell in sheet1) {
    if(sheet1.hasOwnProperty(cell)) {
        console.log(cell, sheet1[cell].v);
    }
}

上述代码会输出Sheet1中所有单元格的地址和值。

实现Excel导出

导出数据

实现Excel导出，需要先将数据转换成Excel可以识别的格式。这里我们需要使用到XLSX库，通过构造Workbook对象，可以方便地导出Excel数据。代码示例：

const data = [
  ['姓名', '年龄', '性别'],
  ['张三', 20, '男'],
  ['李四', 25, '女'],
  ['王五', 22, '男']
];

const sheetName = 'Sheet1';
const workbook = XLSX.utils.book_new();
const worksheet = XLSX.utils.aoa_to_sheet(data);
XLSX.utils.book_append_sheet(workbook, worksheet, sheetName);
XLSX.writeFile(workbook, 'data.xlsx');

上述代码会生成一个data.xlsx文件，其中包含了一个名为Sheet1的Sheet，包含上述数据。

导出样式

除了数据外，有时候我们也需要将Excel的样式导出。这个可以通过设置Worksheet中每个单元格的样式来实现。代码示例：

const data = [
  ['姓名', '年龄', '性别'],
  ['张三', 20, '男'],
  ['李四', 25, '女'],
  ['王五', 22, '男']
];

const sheetName = 'Sheet1';
const workbook = XLSX.utils.book_new();
const worksheet = XLSX.utils.aoa_to_sheet(data);

// 设置表头样式
XLSX.utils.sheet_add_aoa(worksheet, [
  ['name', 'bold', 'center']
], {origin: 'A1'});

// 设置单元格样式
const range = XLSX.utils.decode_range(worksheet['!ref']);
for (let R = range.s.r; R <= range.e.r; ++R) {
  for (let C = range.s.c; C <= range.e.c; ++C) {
    const cellRef = XLSX.utils.encode_cell({r: R, c: C});
    if(R === 0) {
      // 表头样式
      worksheet[cellRef].s = {
        font: {bold: true},
        alignment: {horizontal: "center"}
      };
    } else {
      // 数据样式
      worksheet[cellRef].s = {
        font: {bold: false},
        alignment: {horizontal: "left"}
      };
    }
  }
}

XLSX.utils.book_append_sheet(workbook, worksheet, sheetName);
XLSX.writeFile(workbook, 'data.xlsx');

上述代码中，我们使用了XLSX的utils模块提供的工具函数，通过设定font和alignment属性来设置单元格样式。具体的样式属性可以查看XLSX文档。

以上就是使用纯前端JavaScript实现Excel导入导出的完整攻略。