Excel.js导出图片和表格

说明

分析一个好用的插件，之前导出使用xml纯前端导出表格和图片会有一个bug，就是wps一切正常。excel软件打开会乱码而且图片会解析失败。
这里说的就是使用exceljs解决方案

解决

npm install file-saver --save
npm i exceljs （这里用的4.3.0版本）

简单封装了一个导出方法

import { saveAs } from './FileSaver.js'
import Excel from 'exceljs'
const exportToExcel = (data = { columns: [], rows: [], baseImg: '' }, name) => {
  if (!data.columns || !data.rows) return
  const columns = data.columns
  const rows = data.rows
  const baseImg = data.baseImg
  const workbook = new Excel.Workbook()
  const worksheet = workbook.addWorksheet(name)
  worksheet.mergeCells('A1:R18')
  // console.log(img, 'img')
  // 通过 base64  将图像添加到工作簿
  const imageId1 = workbook.addImage({
    base64: baseImg,
    extension: 'jpeg'
  })
  //  在一定范围内添加图片
  // worksheet.addImage(imageId1, {
  //   tl: { col: 5, row: 0 },
  //   ext: { width: 1200, height: 600 }
  // })
  worksheet.addImage(imageId1, {
    tl: { col: 0, row: 0 },
    br: { col: 18, row: 18 }
  })
  worksheet.addTable({
    theme: null,
    name: 'MyTable',
    ref: 'A20',
    columns,
    rows
  })
  // 动态计算表头长度
  let width = adaptiveWidth(columns)
  if (width.length > 0) {
    for (let i = 0; i < width.length; i++) {
      worksheet.getColumn(width[i].ind).width = width[i].width
    }
  }
  // const fileType = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel'
  const fileType = 'application/octet-stream'
  workbook.xlsx.writeBuffer().then(data => {
    const blob = new Blob([data], { type: fileType })
    saveAs(blob, name + '.xlsx')
  })
}
const adaptiveWidth = (columns) => {
  let result = []
  for (let i = 0; i < columns.length; i++) {
    let str = columns[i].name.length
    // 四个字符为标准长度，累计长度倍数增加
    if (str > 4) {
      let number = Math.floor(str / 4)
      let width = 5 * number + 10
      result.push({
        ind: i + 1,
        width
      })
    }
  }
  return result
}

export default exportToExcel

接收三个参数，图片导出需要可以接收base64 或者直接图片路径。还有就是表头的数组columns，表数据源的数组rows（数据源是个二维数组）
这里自己加了个动态判断导出表头的宽度计算。可以自适应列宽。
这里是中文文档，可以自行查阅使用https://github.com/exceljs/exceljs/blob/master/README_zh.md#%E9%A1%B5%E9%9D%A2%E8%AE%BE%E7%BD%AE