前端（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  row[e])// 遍历图片字段for (let ai = 0; ai  {  // 转换成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

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

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