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')
}
相关推荐
Gracemark1 天前
高德地图-地图选择经纬度问题【使用输入提示-使用Autocomplete进行联想输入】(复盘)
vue.js
天下无贼1 天前
【手写组件】 Vue3 + Uniapp 手写一个高颜值日历组件(含跨月补全+今日高亮+选中状态)
前端·vue.js
洋葱头_1 天前
vue3项目不支持低版本的android,如何做兼容
前端·vue.js
奔跑的蜗牛ing1 天前
Vue3 + Element Plus 输入框省略号插件:零侵入式全局解决方案
vue.js·typescript·前端工程化
最后一个农民工1 天前
vue3实现仿豆包模版式智能输入框
前端·vue.js
艾小码1 天前
Vue组件到底怎么定义?全局注册和局部注册,我踩过的坑你别再踩了!
前端·javascript·vue.js
wusp19941 天前
项目实战——“微商城”前后台【005】之前台项目首页编写
vue.js·vant·底部导航栏
森林的尽头是阳光1 天前
vue防抖节流,全局定义,使用
前端·javascript·vue.js
计算机毕业设计木哥1 天前
计算机毕设选题推荐:基于Java+SpringBoot物品租赁管理系统【源码+文档+调试】
java·vue.js·spring boot·mysql·spark·毕业设计·课程设计
zero13_小葵司1 天前
Vue 3 前端工程化规范
前端·javascript·vue.js