js实现下载excel

excel是常见的表格处理工具,那么前端怎么实现excel生成与下载呢?我们利用xlsx.js来实现

一. 安装js-xlsx

npm install xlsx

二. 文档简介
完成的XLSX对象:

需要理解的术语:
1 workbook是xlsx读取excel内容后的js对象,读取到内容后可以对表格进行操作;同样的也可以创建一个空的workbook,往其中写入内容
完整的workbook对象:
(其中最重要的是两个属性,SheetNames(表名)以及Sheets(数据))
2. XLSX.utils是XLSX重要的一个对象,可以实现读取其他文件格式如: 数组/json/html为workbook形式;同时也可以导出

2.1 数组转为表格并下载

// 1. 准备js数组
const arr = [
    ["序号", "姓名", "公证编号", "手机号", "房号", "身份证号", "类型", "备注"],
    [1, "刘备", "a1234", "13548182222", "", "1111", "户口入学", "aaa"],
    [2, "张飞", "b1234", "13548182223", "", "222", "随迁入学", "bbb"],
    [3, "关羽", "c1234", "13548182224", "", "33333", "户口入学", "ccc"]
];
// 将数组转为sheet
const sheet = XLSX.utils.aoa_to_sheet(arr);

// 先组装wookbook数据格式
let workbook = {
    SheetNames: ['test'], // 总表名
    Sheets: {test: sheet}, // test是表名
};
// 下载表格
XLSX.writeFile(workbook, 'test.xlsx');

3.2 导入excel并转为数组格式

// 1. 查看workbook对象
function handleFile(e) {
   var files = e.target.files, 
       f = files[0];
   var reader = new FileReader();
   reader.onload = function(e) {
       var data = new Uint8Array(e.target.result);
       var workbook = XLSX.read(data, {type: 'array'});
       /* DO SOMETHING WITH workbook HERE */
       console.log(workbook)
       /* 其中workbook.SheetNames[0]是表名下对应的数据 sheet数据 */
	   let arr = XLSX.utils.sheet_to_json(workbook.Sheets[workbook.SheetNames[0]]))
   };
   reader.readAsArrayBuffer(f);
}
document.querySelector('#file').addEventListener('change', handleFile, false);