使用xlsx实现前端数据生成excel并下载

1. 安装依赖xlsx

npm install xlsx --save

2. 引入插件

// 俩种方法均可引入
import XLSX from 'XLSX';
const XLSX = require("xlsx");

3. 实现步骤

// 导出的数据
const data = [
   ['姓名', '年龄', '班级'],
   ['大熊', '12', '304班'],
   ['胖虎', '13', '303班'],
   ['静香', '12', '304班'],
   ['小夫', '13', '303班'],
 ]；
 // excel导出
 const sheet = XLSX.utils.aoa_to_sheet(data);
 const book = XLSX.utils.book_new();
 XLSX.utils.book_append_sheet(book,sheet,"sheet1"); // 生成sheet
 
 // 设置行宽
 const rowNum = this.columns.length - 1;
 sheet['!cols'] = []
 for (let i=0;i<rowNum;i++){
   sheet['!cols'].push({ wpx: 100 })
 }
 
 // 导出样式需要用到xlsx-style，所有没有表格样式
 XLSX.writeFile(book,`班级表.xlsx`); // 导出

4. 实现效果

5. 小结

本文只是因公司需要导出当前页数据所实现功能，并未进行excel单元格合并，样式等操作，如有需要，请到官网查看。

• js-xlsx官方文档：https://github.com/SheetJS/sheetjs#installation
• js-xlsx中文文档：https://segmentfault.com/a/1190000018077543
• xlsx-style手册：https://www.npmjs.com/package/xlsx-style