vue导出excel的时候多张图片
遇到数据结构是[ { id:id, image:[‘图片’,‘图片’,‘图片’] } ] 这样的数据导出，使用插件 js-table2excel 导出的时候发现它只能导出一张图片，我就自己写了一个方，给大家分享分享
首先，安装依赖库xlsx和file-saver
npm install xlsx file-saver --save
在需要导出的组件中，定义一个导出 Excel 的方法：
import XLSX from 'xlsx';import FileSaver from 'file-saver';export default {methods: {async exportExcel() {// 定义表头const headers = ['id', 'name', 'email', 'images'];// 处理数据const data = this.data.map(item => ({id: item.id,name: item.name,email: item.email,images: item.images.join('\n') // 将图片数组转换为字符串}));// 加载图片并转换为 base64 编码for (let i = 0; i < data.length; i++) {const item = data[i];const imageUrls = item.images.split('\n');const imagePromises = imageUrls.map(url => this.loadImage(url));const images = await Promise.all(imagePromises);item.images = images.map(image => this.convertImageToBase64(image)).join('\n');}// 将数据转换为 sheetconst worksheet = XLSX.utils.json_to_sheet(data, {header: headers });// 设置列宽worksheet['!cols'] = [{width: 20 }, {width: 20 }, {width: 30 }, {width: 50 }];// 创建一个新的工作簿const workbook = XLSX.utils.book_new();// 将 sheet 添加到工作簿中XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');// 将工作簿保存为二进制数据const excelBuffer = XLSX.write(workbook, {type: 'array' });// 保存工作簿为 Excel 文件并下载FileSaver.saveAs(new Blob([excelBuffer]), 'data.xlsx');},loadImage(url: string): Promise<HTMLImageElement> {return new Promise((resolve, reject) => {const img = new Image();img.crossOrigin = 'Anonymous';img.onload = () => resolve(img);img.onerror = reject;img.src = url;});},convertImageToBase64(image: HTMLImageElement): string {const canvas = document.createElement('canvas');canvas.width = image.width;canvas.height = image.height;const ctx = canvas.getContext('2d');ctx.drawImage(image, 0, 0);return canvas.toDataURL('image/jpeg');}}};
在组件模板中，添加一个按钮或其他 UI 元素来触发导出 Excel 的方法：
<template><button @click="exportExcel">导出 Excel</button></template><script lang="ts">export default {data(){return {data:[{id: 1, name: 'Alice', email: 'alice@', images: ['/bizs/0105/12559ac823d48afb48f42b9cb10f99c4.png','/bizs/0105/12559ac823d48afb48f42b9cb10f99c4.png'] },{id: 2, name: 'Bob', email: 'bob@', images: ['/bizs/0105/12559ac823d48afb48f42b9cb10f99c4.png'] },{id: 3, name: 'Charlie', email: 'charlie@', images: ['/bizs/0105/12559ac823d48afb48f42b9cb10f99c4.png','/bizs/0105/12559ac823d48afb48f42b9cb10f99c4.png','/bizs/0105/12559ac823d48afb48f42b9cb10f99c4.png']]}},}</script>
这样，点击按钮即可导出带图片的 Excel 表格。需要注意的是，由于xlsx库需要在浏览器中使用FileSaver.js库来保存文件，因此导出 Excel 表格只能在浏览器
