前端导出excel （Vue，React通用）

注意：这里是纯前端的数据处理转excel，正常情况下是需要后端生成文件流后，我们再导出。

直接上代码：

vue：首先在 script标签 内先引入 XLSX

react：直接在当前页面的文件夹内引入 XLSX

import XLSX from 'xlsx'

请注意，在使用此方法之前，你需要在项目中安装XLSX库。你可以通过npm安装XLSX库，命令如下：

npm install xlsx --save

在 js里面定义这个方法：

// 导出excel
exportData() {
  // 这里的this.dataExport表示要导出的数组数据（vue的写法）如果是react，只需把data赋值成要导出的数据的值就行。注意数据必须是数组类型
  const data = this.dataExport
  // 创建一个Excel文件对象
  const workbook = XLSX.utils.book_new();
  const worksheet = XLSX.utils.json_to_sheet(data);
  console.log("workbook",workbook);
  console.log("worksheet",worksheet);
  // 将worksheet添加到workbook中
  XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
  // 将workbook转换为blob对象
  const wbout = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
  const blob = new Blob([wbout], { type: 'application/octet-stream' });
  // 下载Excel文件
  const fileName = '导出表格详情表.xlsx';
  if ('download' in document.createElement('a')) {
    const link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.download = fileName;
    link.click();
    URL.revokeObjectURL(link.href);
  } else {
    navigator.msSaveBlob(blob, fileName);
  }
}

在点击事件里面执行这个方法就可以实现表格导出啦~

这是最基本的表格导出，有任何疑问可以在下方提出来噢！博主看到了都会回复的