XLSX导出带样式的Excel表格失败

项目的要求,需要导出一个结果到Excel表格中,因为所以,没有用Java的方式去实现,而选择了Vue前端直接导出的方式来实现。

开头总结:
使用xlsx-style的XLSX对象来生成Excel的对象才能实现样式,需要区分开xlsx包的XLSX对象

导入XLSX

网上有很多资料,基本上就是使用XLSX去实现Excel表格的创建

cnpm install --save xlsx

在导入XLSX后,如果要实现带样式的Excel表格,还需要再导入xlsx-style

cnpm install --save xlsx-style

注意:
导入xlsx-style时,在引用入vue后,启动时会抛出异常

import XLSX from "xlsx-style"
报错:This relative module was not found: ./cptable in ./node_modules/xlsx-style@0.8.13@xlsx-style/dist/cpexcel.js

需要手动导入JS,在node-modules中找到xlsx-style中的dist目录中的xlsx.full.min.js粘贴到static里
在这里插入图片描述
然后再在index.html中导入这个js

<script type="text/javascript" src="./static/xlsx.full.min.js"></script>

在这里插入图片描述
或者修改源码:

在\node_modules\xlsx-style\dist\cpexcel.js 807行 的 
var cpt = require(./cpt’ + ‘able’); 
改成 
var cpt = cptable;

xlsx-style的使用

使用上诉方式导入后,若想实现在sheet参数中的添加的样式,例如:

sheet['B2'].s = {
        font: {
          name: '宋体',
          sz: 18,
          color: {rgb: 'ff0000'},
          bold: true,
          italic: false,
          underline: false
        },
        alignment: {
          horizontal: 'center',
          vertical: 'center'
        }
      }

只需要在将sheet对象转换为Excel对象的Blob格式时,使用XLSX --xlsx-style包中 进行转换即可,使用xlsx包中的只能生成无样式的excel!

/**
  * 将一个sheet转成最终的excel文件的blob对象,然后利用URL.createObjectURL下载
  */
    sheet2blob: function (sheet, sheetName) {
      sheetName = sheetName || 'sheet1'
      var workbook = {
        SheetNames: [sheetName],
        Sheets: {}
      }
      workbook.Sheets[sheetName] = sheet
      // 生成excel的配置项
      var wopts = {
        bookType: 'xlsx', // 要生成的文件类型
        bookSST: false, // 是否生成Shared String Table,官方解释是,如果开启生成速度会下降,但在低版本IOS设备上有更好的兼容性
        type: 'binary'
      }
      var wbout = XLSX.write(workbook, wopts) // 这里的XLSX是上面手动导入的JS中的,是xlsx-style的XLSX
      var blob = new Blob([this.s2ab(wbout)], {type: 'application/octet-stream'})
      return blob
    },
    // 字符串转ArrayBuffer
    s2ab: function (wbout) {
      var buf = new ArrayBuffer(wbout.length)
      var view = new Uint8Array(buf)
      for (var i = 0; i !== wbout.length; ++i) view[i] = wbout.charCodeAt(i) & 0xFF
      return buf
    }

需要注意的是:XLSX这个参数,就是xlsx-style所属了!
如果还需要使用XLSX包中的一些函数,例如aoaToSheet等,那么导入的XLSX包不能引入为

import XLSX from "XLSX"

这样会导致上面手动在index.html中导入的xlsx-style冲突失效!!!

import XLSXD from "XLSX"

var sheet = XLSXD.utils.aoa_to_sheet(aoa)
Logo

前往低代码交流专区

更多推荐