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

本文主要是介绍前端（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]// 图片字段值，一个完成的urlconst 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}// 工作簿写入excelworkbook.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 = urlimage.crossOrigin = '*'image.onload = () => {const canvas = document.createElement('canvas')canvas.width = width || image.widthcanvas.height = height || image.heightconst ctx = canvas.getContext('2d')ctx.drawImage(image, 0, 0, width || image.width, height || image.height)const base64 = canvas.toDataURL('image/png')resolve(base64)}})
}

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

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