基于xlsx.js的前端导出单sheet的Excel实现案例详解

之前由于公司有excel导出的需求，后端开发人手不足，为了及时完成项目需求，就基于sheet.js中的xlsx.js结合网上案例做了一个单sheet和多sheet的Excel导出功能。该示例是单sheet的Excel导出，多sheet的导出过几天会整理发布出来！

注意：该方法有一个弊端，只能导出单sheet的数据，如果数据比较多，很可能被浏览器限制而报错！

这里先介绍一下sheetjs和xlsx的库：

sheetjs 是用于解析和生成电子表格的JavaScript库。它支持多种电子表格格式，包括.xlsx、.xls、.ods和.csv。xlsx 是sheetjs库的一部分，用于处理.xlsx电子表格格式。xlsx.js文件是通过sheetjs包中的rollup.js通过ES模块转化的，rollup.js是一个类webpack的打包库，可以将其转换JS模块为ES模块，打包为xlsx.js文件。

下面是引入库的方法：

 <script type="text/javascript" src="https://cdn.bootcss.com/xlsx/0.16.2/xlsx.full.min.js"></script> 

功能实现方面，如果是后台人员，直接用库就行，无需过多的配置。如果是前端，就需要做一些配置来引入项目，以下是步骤：

1、下载库并解压；
2、安装npm（具体安装方法百度或者咨询前端同学）；
3、终端到sheetjs-master目录下执行npm install；
4、终端执行 webpack --env production生成可发布的xlsx.js文件；
5、把xlsx.js文件拷贝到项目中；
6、用script引入。

Excel导出的实现步骤：

1、配置excel头，即导出的Excel的表头，可以自定义；
2、创建空白Excel，相当于创建表格主体；
3、将配置好的excel头写入excel中；
4、将数据写入excel中；
5、将excel导出成json数据；
6、调用下载链接，用a标签实现下载。

以下是代码实现：

 //表格头部
 const titles = ['姓名', '年龄', '性别'];

 //表格主体
 let s = {
    sheet: {},
    cols: [], //列配置
    data: []  //数据
 };

 // 添加列配置
 titles.forEach((item) => {
    s.cols.push({wch: 10})
 });

 // 给Excel添加头部
 s.data.push(titles);

 //写入数据
 tableData.forEach((item, index) => {
    //以下几行是实现数据对齐居中的操作，可注释掉，效果是数据内容左对齐
    // var col = s.cols[index];
    // col.style = {align:'center'};
    s.data.push([item.userName, item.age, item.sex]);
 });

 //sheet名称
 let sheetName = 'sheet1';

 /*
     * 生成excel
     * 参数1：workbook对象
     * 参数2：工作表名称
     */
 let wb = {
    SheetNames: [sheetName],
    Sheets: {}
 };
 wb.Sheets[sheetName] = s;

 //导出json数据，根据options中自定义的下载文件名
 let wbout = XLSX.write(wb, {
    bookType: 'xlsx',
    bookSST: true,
    type: 'array'
 });

 let excelName = 'test';

 //导出excel格式文件
 saveAs(new Blob([wbout], {
    type: "application/octet-stream"
 }), excelName + ".xlsx")

这仅仅是单sheet的一个简单的示例，目的是为了快速解决excel导出的问题，在实际开发中，还是有一些复杂的需求需要注意的，比如下面的一些问题：

1、sheetjs限制的数据量在65535行×255列，超过这个数量需要做一些技巧性处理，例如合并多个sheet，设置行高列宽等。
2、数据如何处理，每个数据的类型是什么，如何区分，有些数据类型可能需要转成字符串才能放入到excel表格中，不然会有冲突。
3、兼容性：应兼容.xlsx、.xls等多种excel格式，前端处理比较困难，需要后端支持。
4、防止表格出现乱码的情况。
5、解决浏览器下载的限制。

好了，相信大家对使用xlsx.js导出excel表格已经有了一定程度的了解，如果您在使用xlsx.js的过程中遇到任何问题，可以随时提问。