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')
}
相关推荐
专注前端30年27 分钟前
2025 最新 Vue2/Vue3 高频面试题(10月最新版)
前端·javascript·vue.js·面试
我的div丢了肿么办2 小时前
js函数声明和函数表达式的理解
前端·javascript·vue.js
武天2 小时前
一个项目有多个后端地址,每个后端地址的请求拦截器和响应拦截器都不一样,该怎么封装
vue.js
潜心编码2 小时前
基于vue的停车场管理系统
前端·javascript·vue.js
三小河2 小时前
React Vite 中动态批量导入路由
前端·vue.js
拉不动的猪3 小时前
为什么不建议项目里用延时器作为规定时间内的业务操作
前端·javascript·vue.js
jason_yang4 小时前
vue3+element-plus按需自动导入-正确姿势
vue.js·vite·element
泉城老铁4 小时前
vue实现前端excel的导出
前端·vue.js
用户51681661458414 小时前
Lottie动画在前端web、vue、react中使用详解
前端·vue.js
咖啡の猫4 小时前
Vue收集表单数据
前端·javascript·vue.js