前端（vue）exceljs导出Excel（导出图片）

少说废话，直接入题

先引入exceljs

npm install exceljs --save

随后在导出Excel的方法里面这样写

async exportExcel () {
    // 定义表头
    const columns = [
        {
          header: '标题名',
          key: 'data数据字段名',
          width: 14
       },
       {
          header: '姓名',
          key: 'name',
          width: 14
       },
       {
          header: '头像',
          key: 'img',
          width: 14
       }
    ]

    // 将要导出的数据
    const exportDataList = [
        {
            name: '张三',
            img: '图片url'
        }
    ]

    const Exceljs = require('exceljs')
    // 创建工作簿
    const workbook = new Exceljs.Workbook()
    // 创建工作表
    const workSheet = workbook.addWorksheet('sheet1')
    // 工作表添加表头
    workSheet.columns = columns
    // imgFieldList：图片字段名
    const imgFieldList = ['img', 'img2',....]
    // 往Excel插入图片
    for (let ri = 0; ri < exportDataList.length; ri++) {
        // 获取遍历的当前行
        const row = exportDataList[ri]
        // 过滤出当前行图片字段有值的
        const currentRowImgFieldList = imgFieldList.filter(e => row[e])
        // 遍历图片字段
        for (let ai = 0; ai < currentRowImgFieldList.length; ai++) {
          const imgField = currentRowImgFieldList[ai]
          // 图片字段值，一个完整的url
          const url = row[imgField]
          // 根据url把图片转换成base64编码，这里加了await, 方法名前面必须得加async，把这个imageToBase64方法变成同步方法，imageToBase64方法后面再贴出来
          const base64 = await imageToBase64(url)
          // 把base64编码的图片插入excel工作簿里面
          const imageId = workbook.addImage({
            base64: base64,
            extension: 'png'
          })
          // 当前工作表（当前excel页）加入图片，tl.col：excel第几列，tl.row：excel第几行，ext里面表示图片宽高
          workSheet.addImage(imageId, {
            tl: { col: columns.length + ai - 1, row: ri + 1 },
            ext: { width: 39, height: 39 }
          })
        }
    }
    // 往工作表插入数据
    workSheet.addRows(exportDataList)
    for (let ri = 0; ri < exportDataList.length; ri++) {
        // 设置除了标题之外，内容的行高，避免图片太高，这里太小，导致显示很乱
        workSheet.getRow(ri + 2).height = 35
    }
    // 工作簿写入excel
    workbook.xlsx.writeBuffer().then((buffer) => {
      // 转换成Blob格式
      const blob = new Blob([buffer], { type: 'application/octet-stream' })
      // 导出excel，这里获得了blob，有很多种导出方法，可以用FileSaver.js（百度一下就有了），我这里就简单点了，用HTML的A标签导出
      // 获取下载链接
      const url = URL.createObjectURL(blob)
      // 页面上有一个a标签，A标签设置一下id或者ref，反正这里获取它的dom结构，用于下载Excel使用
      this.$refs.downloadExcel.href = url
      // 设置excel名称
      this.$refs.downloadExcel.download = '测试导出.xlsx'
      // 模拟点击一次a标签，执行下载
      this.$refs.downloadExcel.click()
    })
}

imageToBase64方法

imageToBase64 (url, width, height) {
  return new Promise((resolve, reject) => {
    const image = new Image()
    image.src = url
    image.crossOrigin = '*'
    image.onload = () => {
      const canvas = document.createElement('canvas')
      canvas.width = width || image.width
      canvas.height = height || image.height
      const ctx = canvas.getContext('2d')
      ctx.drawImage(image, 0, 0, width || image.width, height || image.height)
      const base64 = canvas.toDataURL('image/png')
      resolve(base64)
    }
  })
}

注意，如果图片跨域，且项目没有处理跨域，imageToBase64方法会报错，至于如何处理跨域问题，我这个菜鸡就不懂了。。。

如有需要看导出word文档（带图片导出）的可以看我另一篇文章。

前端（vue）html-docx导出word（导出图片）https://blog.csdn.net/new_public/article/details/135695852

码字不易，于你有利，勿忘点赞

天生我材必有用，千金散尽还复来