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')
}
相关推荐
木头没有瓜1 分钟前
vscode离线安装插件
ide·vue.js·vscode
浪裡遊1 小时前
Sass详解:功能特性、常用方法与最佳实践
开发语言·前端·javascript·css·vue.js·rust·sass
markyankee1012 小时前
使用 Vue 脚手架创建项目的完整指南
vue.js
青松学前端2 小时前
vue-2.7源码解读之初始化流程和响应式实现
前端·vue.js·前端框架
流星稍逝2 小时前
Vue3 + Uniapp 图片压缩公共方法封装
前端·vue.js
eric*16884 小时前
尚硅谷张天禹老师课程配套笔记
前端·vue.js·笔记·vue·尚硅谷·张天禹·尚硅谷张天禹
菌菇汤5 小时前
uni-app实现单选,多选也能搜索,勾选,选择,回显
前端·javascript·vue.js·微信小程序·uni-app·app
qq_411671986 小时前
vue3 的模板引用ref和$parent
前端·javascript·vue.js
清幽竹客7 小时前
vue-37(模拟依赖项进行隔离测试)
前端·vue.js
vvilkim7 小时前
Nuxt.js 页面与布局系统深度解析:构建高效 Vue 应用的关键
前端·javascript·vue.js