前端导出excel之使用exceljs + file-saver导出表格到excel

最近在使用exceljs导出表格数据时遇到问题，这里分享下，避免大家踩坑。

首先贴个exceljs中文文档地址：https://github.com/exceljs/exceljs/blob/master/README_zh.md

。。。我一开始看的英文文档，看得脑阔疼，过了好久才发现居然还有个中文文档？好吧，我鼠标滚太快了，直接看的正文，根本没注意这行。。。

image.png

image.png

先贴个最简单的导出表格例子

版本如下：

image.png

页面效果如下：

image.png

导出效果如下：

image.png

问题1：为什么这里还要使用file-saver，官方不是提供了 writeFile 方法吗？

官网截图：

image.png

然后我也这样用了：

image.png

结果浏览器报错了：

image.png

最后发现workbook.xlsx.writeFile(filename)是在node端用的：

image.png

app.js代码如下，可以自己试下：

let excel = require("exceljs");
let workbook = new excel.Workbook();
workbook.creator = 'Me';
workbook.lastModifiedBy = 'Her';
workbook.created = new Date(1985, 8, 30);
workbook.modified = new Date();
workbook.lastPrinted = new Date(2016, 9, 27);

let sheet1 = workbook.addWorksheet('Sheet1');
let reColumns=[
  {header:'FirstName',key:'firstname'},
  {header:'LastName',key:'lastname'},
  {header:'Other Name',key:'othername'}
];
sheet1.columns = reColumns;
workbook.xlsx.writeFile("./test.xlsx").then(function() {
  console.log("xlsx file is written.");
});

问题2：导出的表格如何更改列宽？

image.png

首先这里设置width是没效果的

image.png

官网表格列属性介绍：

image.png

解决办法：使用getColumn给每列设置宽度

image.png

image.png

问题3：优化，把导出的表格样式修改下，将表头居中，并设置边框。

官网截图：

image.png

代码如下,替换之前添加的那三行设置宽度的代码：

        // 表格列宽设置
        sheet.getColumn('C').width = 15
        sheet.getColumn('D').width = 15
        sheet.getColumn('E').width = 30

        // 表头 居中并设置边框
        let h1 = sheet.getCell('C3')
        let h2 = sheet.getCell('D3')
        let h3 = sheet.getCell('E3')

        let arr = [h1, h2, h3]
        arr.map(item => {
          // 居中 
          item.alignment = {vertical: 'middle', horizontal: 'center'}
          // 边框
          item.border = {
            top: {style: 'thin'},
            left: {style: 'thin'},
            bottom: {style: 'thin'},
            right: {style: 'thin'}
          }
        })

效果图如下：

image.png

上面的方式有点low，如果表头过多或者我还需要对表格其他单元格设置样式，就得需要对上面的代码进行封装了, 这个在下一篇贴封装后的代码。

问题4：表格主题样式有哪些？

image.png

官网没有样式效果，小伙伴们可以自己试下。

更多exceljs的使用请查阅官网：
https://www.npmjs.com/package/exceljs