使用exceljs和file-saver导出带图片的excel表格

参考

https://www.swvq.com/article/detail/487
https://github.com/exceljs/exceljs/blob/master/README_zh.md#图片

import ExcelJS from 'exceljs'
import fileSaver from 'file-saver'

let workbook = null
let worksheet = null

// 图片转base64
const convertImgToBase64 = (url) => {
  return new Promise((resove, reject) => {
    const canvas = document.createElement('canvas') as HTMLCanvasElement
    const ctx = canvas.getContext('2d')
    const img = new Image()
    img.crossOrigin = 'Anonymous'
    img.onload = function () {
      canvas.height = img.height
      canvas.width = img.width
      ctx.drawImage(img, 0, 0, img.width, img.height)
      var dataURL = canvas.toDataURL('image/png')
      resove(dataURL)
    }
    img.src = url
  })
}
// 导出
const handleExport = async () => {
  workbook = new ExcelJS.Workbook()
  workbook.created = new Date()
  workbook.modified = new Date()
  worksheet = workbook.addWorksheet('sheet-demo')

  worksheet.columns = [
    { header: 'skuid', key: 'id', width: 10 },
    { header: '姓名', key: 'name', width: 32 },
    { header: '图片', key: 'DOB', width: 10, outlineLevel: 1 },
  ]
  const row = worksheet.getRow(2)

  row.values = [2356545456, 'wb927448', 'https://www.baidu.com']

  const data = await convertImgToBase64('https://avatars.githubusercontent.com/u/40457081?s=48&v=4')
  console.log(data)
  const imageId = workbook.addImage({
    base64: data,
    extension: 'png',
  })
  console.log(imageId)
  worksheet.addImage(imageId, {
    tl: {
      col: 3,
      row: 5,
    },
    ext: {
      width: 40,
      height: 40,
    },
	// 超链接
    hyperlinks: {
      hyperlink: 'https://www.baidu.com',
      tooltip: 'https://www.baidu.com',
    },
  })

  const buffer = await workbook.xlsx.writeBuffer()
  fileSaver(
    new Blob([buffer], {
      type: 'application/octet-stream',
    }),
    'demo.xlsx'
  )
}

效果

__EOF__

本文作者：laine's blog
本文链接：https://www.cnblogs.com/laine001/p/17512613.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！