少说废话,直接入题
先引入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
码字不易,于你有利,勿忘点赞
天生我材必有用,千金散尽还复来