前端使用exceljs导出带水印的excel表格

exceljs兼容

exceljs 4.3.0 在ie11界面空白提示超出字符集; 在火狐5.1提示 对象不支持“finally”属性或方法"
exceljs 3.9.0 在ie11 界面可显示，babel失效，promise没有finally，提示 对象不支持“finally”属性或方法"（直接加promise.prototype.finally的shim可以解决这个问题

基于vue，兼容ie11，需要使用exceljs 3.9.0，再加如下配置：
①依赖corejs 3以上,依赖regenerator-runtime babel.config.js写入如下

module.exports = {
  presets: [
    ['@vue/app', {
      useBuiltIns: 'entry',
      corejs:"3"
    }]
  ]
}

main.js最上方写入如下

import 'core-js/stable'
import 'regenerator-runtime/runtime'

②依赖promise.prototype.finally main.js写入

require('promise.prototype.finally').shim()

先说废话

搞半天，不知道通过文件名和通过buffer的方式是什么问题，搞不定就是了，后来就用base64,用base64就没问题了，就酱。demo暂无

代码

import { saveAs } from 'file-saver'

const ExcelJS = require('exceljs')

const ExportExcel = {
  createWsSheet (staff) {
    const workbook = new ExcelJS.Workbook()
    const test = this.setWatermark(staff)
    const imageId1 = workbook.addImage({
      base64: test,
      extension: 'png'
    })
    const worksheet = workbook.addWorksheet('My Sheet')
    worksheet.addBackgroundImage(imageId1)
    workbook.xlsx.writeBuffer().then((res) => {
      saveAs(new Blob([res], { type: 'application/octet-stream' }), 'test.xlsx')
    })
  },
  setWatermark (str) {
    let id = '1.23452384164.123412416'

    if (document.getElementById(id) !== null) {
      document.body.removeChild(document.getElementById(id))
    }

    // 创建一个画布
    let can = document.createElement('canvas')
    // 设置画布的长宽
    can.width = 500
    can.height = 400
    let cans = can.getContext('2d')
    // 旋转角度
    cans.rotate(-60 * Math.PI / 220)
    cans.font = '18px Vedana'
    // 设置填充绘画的颜色、渐变或者模式
    cans.fillStyle = 'rgba(130, 142, 162, 0.2)'
    // 设置文本内容的当前对齐方式
    cans.textAlign = 'left'
    // 设置在绘制文本时使用的当前文本基线
    cans.textBaseline = 'Middle'
    let initY = can.height
    cans.fillText(str, 0, initY)

    var dataURL = can.toDataURL('image/png')
    console.log(dataURL)
    return dataURL
  }
}
export default ExportExcel

参考：中文文档