解决xlsx-style导出带样式和公式的excel表格遇到的坑

自律君
4,267 阅读4分钟

最近做一个excel导出功能,这样的功能之前都是由后端去返回一个url,然后前端直接window.href就可以导出一份excel表格给用户了.但是由于后台时间上不够,只能由前端来完成这个功能了.通过百度得出,xlsx(也叫sheet.js)可以满足这个需求.至于如何使用,这里就不再写了,因为重点不在这里.

以下功能都是在vue2版本下完成的

重点是,在完成初版之后,客户要求excel表格需要按照他们要求的样式来导出,例如字体样式,cell样式之类的,WTF,这要求是越来越多了,工作量成倍增加.没办法,只能再去看看文档了.

// Acquire Data (reference to the HTML table)
var table_elt = document.getElementById("my-table-id");

// Extract Data (create a workbook object from the table)
var workbook = XLSX.utils.table_to_book(table_elt);

// Process Data (add a new row)
var ws = workbook.Sheets["Sheet1"];
XLSX.utils.sheet_add_aoa(ws, [["Created "+new Date().toISOString()]], {origin:-1});

// Package and Release Data (`writeFile` tries to write and save an XLSB file)
XLSX.writeFile(workbook, "Report.xlsb");

XLSX.utils.table_to_book 这个方法可以将elementUI的table表格组件的单元格合并导出到excel中,所以为了省时间,就用elementUI来配合着做样式了.嘻嘻,省了用xlsx来做单元格合并的一步.

表格样式

毫无意外地,又遇到问题了.虽然合并和设置单元格宽高的效果是可以的,但是

        if (key === "A1") {
          data[key].s = {
            border,
            alignment: {
              //对齐方式
              vertical: "center", //竖直居中
              horizontal: "center",
              wrapText: true, //自动换行
            },
            font: {
              name: "宋体",
              sz: 14,
              color: { rgb: "1e1e1e" },
              bold: false,
              italic: false,
              underline: false,
              height: 20,
            },
            fill: {
              fgColor: { rgb: "ffffff" },
            },
          };
        }

当我用这些表格样式来设置好之后再导出excel,发现根本不起效,当我以为是代码问题而去积极百度的时候,突然发现原来xlsx不支持样式的修改,导出之后设置就会无效.只能用xlsx-style来导出才可以.既然有解决方案,那就没问题了,冲.

但是又有意外了,原来xlsx-style的作者已经很久没有维护了,导致bug都没有解决.会在引入xlsx-style的时候出现报错.import XLSXS from "xlsx-style";

image.png

在\node_modules\xlsx-style\dist\cpexcel.js 807行把 var cpt = require('./cpt' + 'able'); 改成 var cpt = cptable;.这个报错就会解决

解决方案链接(两个配合着修改):

1.JavaScript导出excel文件，并修改文件样式 - SegmentFault 思否

2.(12条消息) 安装xlsx-style报错解决办法_柒个M的博客-CSDN博客_xlsx-style引用报错

我在这里只修改\node_modules\xlsx-style\dist\cpexcel.js文件就已经可以去导出有样式的excel表格了

image.png

将npm库放到本地使用

问题又来了,我修改完源码后,直接commit到svn上,以为就完成了任务了,没想到同事说怎么更新之后报错了,这个时候,我明白了,node-modules上的修改没有提交到svn,但是我也不能将node-modules提交到svn,这个不合理,所以我将修改过xlsx-style库直接复制到src下的一个文件夹内,作为本地库来用.但是为了防止同事下一次下载(npm i)把node-modules的文件源码给修改掉,我们还需要做多一步.

//package.json
"xlsx-style": "file:./src/libs/xlsx-style"

如上,将xlsx-style指向本地路径,每次npm i 的时候,就会在本地路径上的库代码下载到node-modules,格式:file: + 本地库路径

做完这一步,就完成任务了,松了一口气,几天的摸鱼时间都没了.

excel导出公式

然而需求总是做不完的,要求导出的excel中带有自动计算的公式,都做了这么多,也不差这一点功能,看官网文档,

          data[key].f = `SUM(J${keyList.length + 1 + 1}:J${
            this.tableData.length + keyList.length - 1
          })`;

这样就可以加上想到的公式,简单,然后测试,发现不起效,哭了,怎么又不起效了呀.原来又是源码问题,那就改源码吧.在node-modules下的xlsx.js修改就可以了(注意不是dist下的xlsx.js)

image.png

解决方案: 关于xlsx-style导出excel文件无法应用公式解决方案 - 你真有趣 - 博客园 (cnblogs.com)

image.png

总结:

xlsx坑比较多,据说excel.js也比较好用,下次可以试试

avatar
文章
阅读
粉丝