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

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

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

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

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

<!-- 纯前端导出excel案例 -->
<template>
  <div class="wrap">
    <div>
      <el-button type="primary" @click="exportExcel">导出excel</el-button>
    </div>
    <div style="width:500px;margin: 20px auto;">
      <el-table
        border
        :data="tableData"
        style="width: 100%">

        <template v-for="(item,index) in tableHeader">
          <el-table-column
            :key="index"
            v-bind="item">
          </el-table-column>
        </template>

      </el-table>
    </div>

  </div>
</template>
<script>
  import ExcelJS from  exceljs 
  import FileSaver from  file-saver 
  export default {
    name:  exceljs-demo ,
    data(){
      return {
        tableHeader: [
          {
            prop:  date ,
            label:  日期 
          },
          {
            prop:  name ,
            label:  姓名 
          },
          {
            prop:  address ,
            label:  地址 
          }
        ],
        tableData: [{
          date:  2016-05-02 ,
          name:  王小虎 ,
          address:  上海市普陀区金沙江路 1518 弄 
        }, {
          date:  2016-05-04 ,
          name:  王小虎 ,
          address:  上海市普陀区金沙江路 1517 弄 
        }, {
          date:  2016-05-01 ,
          name:  王小虎 ,
          address:  上海市普陀区金沙江路 1519 弄 
        }, {
          date:  2016-05-03 ,
          name:  王小虎 ,
          address:  上海市普陀区金沙江路 1516 弄 
        }]
      }
    },
    methods: {
      // 是否为空
      $isNull(val){
        return val === null || val === void 0 || val ===    || (val).toString() ===  NaN 
      },
      async exportExcel(){
        const workbook = new ExcelJS.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);

        // 创建带有红色标签颜色的工作表
        const sheet = workbook.addWorksheet( My Sheet , {properties: {tabColor: {argb:  FFC0000 }}});

        // 生成columns
        let columns = []
        this.tableHeader.map(item => {
          columns.push({
            name: item.label,
//            width: 30 // 这里设置宽度不起作用，详情请看table 下 列属性，里面没有width 属性
          })
        })

        // 生成rows
        let rows = []
        this.tableData.map(item => {
          let arr = []
          this.tableHeader.map(sub => {
            arr.push(!this.$isNull(item[sub.prop]) ? item[sub.prop] :   )
          })
          rows.push(arr)
        })

        sheet.addTable({
          name:  MyTestTable ,
          ref:  C3 , // 表格左上角的位置
          headerRow: true,
          totalsRow: false,
          style: {
            theme:  TableStyleLight1 ,
//            showRowStripes: true,
          },
          columns: columns,
          rows: rows,
        })

        // workbook.xlsx.writeFile( test.xlsx )
        workbook.xlsx.writeBuffer().then(buffer => {
          FileSaver.saveAs(new Blob([buffer], {type:  application/octet-stream }), `test.xlsx`);
        })
      }
    }
  }
</script>
<style scoped>
</style>

版本如下：

页面效果如下：

导出效果如下：

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

官网截图：

然后我也这样用了：

结果浏览器报错了：

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

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：导出的表格如何更改列宽？

第一这里设置width是没效果的

官网表格列属性介绍：

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

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

官网截图：

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

        // 表格列宽设置
        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 }
          }
        })

效果图如下：

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

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

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

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