项目中遇到了利用纯前端导出Excel的功能，Excel格式比较复杂，而且包含图片，刚开始找到了js-xlsx,star有23.5k，但是不支持样式，没有中文文档，最后选择了[exceljs]，这个库star也有6.6k了，支持样式，还有中文文档。哈哈

由于我要导出的Excel样式比较复杂，就用了模板，先做好了一个模板放在项目里，然后再把数据填充到模板里。下面直接放代码，还用到了另外一个库file-saver

1. 再package.json里配置依赖

   "dependencies": {
     "file-saver": "^2.0.2",
     "exceljs": "4.2.0"
   }
   

2. 页面里使用

   <script>
   import ExcelJS from 'exceljs'
   import * as FileSaver from 'file-saver'
   import axios from 'axios'
   
   export default{
   	methods:{
   		exportExcel: function () {
     			const workbook = new ExcelJS.Workbook()
     			//这里读取项目中的文件好像必须的曲线救国，利用http请求的方式请求模板Excel返回一个ArrayBuffer
             axios.get('./images/file/demo23567.xlsx', {responseType: 'arraybuffer'}).then(response => {
               workbook.xlsx.load(response.data).then(() => {//加载模板
                 let sheet1 = workbook.getWorksheet('sheet1')//这是不使用返回的WorkBook
                 sheet1.getCell('C4').value = this.dataForm.tenant_name//根据单元格更新值
                 let sheet4 = workbook.getWorksheet('sheet4')
                 sheet4.getCell('G4').value = this.dataForm.relation_identity_card
                 let sheet5 = workbook.getWorksheet('sheet5')
                 sheet5.getCell('B3').value = this.dataForm.tenant_name
                 let sheet6 = workbook.getWorksheet('picture')
                 //这里用了本地图片做demo，也可使用网络图片
                 axios.get('./distimages/bank_img/050306795095859357755807.jpg', {responseType: 'arraybuffer'}).then(res => {
                   const imageId = workbook.addImage({
                     buffer: res.data,
                     extension: 'jpeg'//这里文件类型没有做判断
                   })
                   sheet6.addImage(imageId, {
                     tl: { col: 0, row: 0 },
                     br: { col: 8, row: 20 }
                   })
                   workbook.xlsx.writeBuffer().then(data => {//最后把填充好数据的Excel导出
                     const blob = new Blob([data], {type: 'application/octet-stream'})
                     FileSaver.saveAs(blob, 'test.xlsx')//这里导出的文件名没有自定义
                   })
                 })
               })
             })
      }
   }
   </script>
   

3. 概念：

   1. WorkBook：就是整个excel表格
   2. WorkSheet：就是excel表格里的工作表，在表格最下方可以看到
   3. Cell：就是表格里的单元格