Vue3+exceljs+file-saver 实现将表格数据中包含图片导出Excel

安装 exceljs

npm install exceljs

安装 file-saver

npm install file-saver

实现

ts 复制代码
const tableData = [
	{
		name: '123',
		age: 18,
		avatorImg: 'data:image/png;base64,..',
	}
]
const exportData = async () => {
	// 创建一个工作簿
	const workbook = new ExcelJS.Workbook()
	// 创建工作表
	const worksheet = workbook.addWorksheet('My Sheet')
	// 设置列头
  	worksheet.columns = [
    	{ header: '人员名称', key: 'name', width: 30 },
    	{ header: '重点人员', key: 'avatorImg', width: 20 },
    	{ header: '年龄', key: 'age', width: 20 },
  	]
  	tableData.forEach((item, index) => {
    	const rowIndex = index + 2 // Excel 行索引从1开始,且第一行为标题
    	const row = worksheet.addRow({
      		name: item.name,
      		warnTime: item.warnTime,
   		})
    	const cellHeight = 140 // 单元格高度,单位是点(1/72 英寸)
    	row.height = cellHeight
    	// 添加图片
    	const imageId = workbook.addImage({
      		base64: 'data:image/jpeg;base64,' + item.avatorImg,
      		extension: 'png',
    	})
    	// 计算图片应该插入的单元格位置
    	const imageCell = `A${rowIndex}`
    	worksheet.addImage(imageId, `${imageCell}:${imageCell}`)
  })
  // 导出 Excel
  const buffer = await workbook.xlsx.writeBuffer()
  const blob = new Blob([buffer], {
    type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
  })
  saveAs(blob, 'example_with_images.xlsx')
}
相关推荐
拉不动的猪8 小时前
简单回顾下Weakmap在vue中为何不能去作为循环数据源,以及替代方案
前端·javascript·vue.js
java水泥工10 小时前
校园管理系统|基于SpringBoot和Vue的校园管理系统(源码+数据库+文档)
数据库·vue.js·spring boot
正义的大古12 小时前
OpenLayers常用控件 -- 章节七:测量工具控件教程
前端·javascript·vue.js·openlayers
子兮曰14 小时前
🚀Vue3异步组件:90%开发者不知道的性能陷阱与2025最佳实践
前端·vue.js·vite
kk不中嘞16 小时前
浅谈前端框架
前端·vue.js·react.js·前端框架
影子信息17 小时前
el-tree 点击父节点无效,只能选中子节点
前端·javascript·vue.js
徐小夕17 小时前
用Vue3写了一款协同文档编辑器,效果简直牛!
前端·javascript·vue.js
小菜全18 小时前
打包 Uniapp
javascript·vue.js·html5
小高00721 小时前
🔥🔥🔥Vue部署踩坑全记录:publicPath和base到底啥区别?99%的前端都搞错过!
前端·vue.js·面试