vue3 使用element表格dom导出excel表格（带图片）样式

### Vue3 中使用 Element Plus 组件导出带图片样式的 Excel 表格 在 Vue3 和 Element Plus 的环境中，要实现带有图片样式的数据表导出到 Excel 文件的功能，可以参考以下方法： #### 1. 安装必要的依赖库 为了支持图片和复杂样式，除了 `FileSaver` 和 `xlsx` 外，还需要额外安装一些工具包来处理二进制数据以及图像嵌入。 ```bash npm install file-saver xlsx jszip --save ``` 其中： - **FileSaver**: 负责保存文件。 - **xlsx**: 主要用于生成 Excel 数据结构。 - **jszip**: 支持压缩操作以便于将图片嵌入到 Excel 文档中。 #### 2. 创建辅助函数以支持图片嵌入 由于标准的 `xlsx` 库不直接支持图片嵌入，因此需要自定义逻辑。可以通过修改工作簿的工作表对象并手动添加绘图节点的方式完成此目标[^5]。 以下是创建一个能够处理图片的方法示例： ```javascript import XLSX from 'xlsx'; import JSZip from 'jszip'; function addImageToSheet(worksheet, imagePath, cellAddress) { const ws = worksheet; const relsPath = `/xl/drawings/_rels/drawing1.xml.rels`; const drawingXmlPath = '/xl/drawings/drawing1.xml'; let relationships = []; let twoCellAnchorIndex = 0; // 添加关系记录 relationships.push({ Id: `rId${relationships.length + 1}`, Type: 'http://schemas.openxmlformats.org/officeDocument/2006/relationships/image', Target: `${imagePath}` }); // 构建drawing XML文档片段 const drawingContent = ` <xdr:twoCellAnchor xmlns:xdr="http://schemas.openxmlformats.org/drawingml/2006/spreadsheetDrawing"> <!-- 设置锚点 --> <xdr:from> <xdr:col>${cellAddress.charCodeAt(0)-65}</xdr:col> <!-- 列号转换 --> <xdr:colOff>0</xdr:colOff> <xdr:row>${parseInt(cellAddress.slice(1))-1}</xdr:row> <!-- 行号减一 --> <xdr:rowOff>0</xdr:rowOff> </xdr:from> <xdr:to> <xdr:col>${cellAddress.charCodeAt(0)-64}</xdr:col> <xdr:colOff>897600</xdr:colOff> <xdr:row>${parseInt(cellAddress.slice(1))}</xdr:row> <xdr:rowOff>897600</xdr:rowOff> </xdr:to> <xdr:pic> <xdr:nvPicPr> <xdr:cNvPr id="${++twoCellAnchorIndex}" name="Picture ${twoCellAnchorIndex}"/> <xdr:cNvPicPr/> </xdr:nvPicPr> <xdr:blipFill> <a:blip xmlns:a="http://schemas.openxmlformats.org/drawingml/2006/main" r:embed="${relationships[relationships.length -1].Id}"/> <a:stretch><a:fillRect/></a:stretch> </xdr:blipFill> <xdr:spPr> <a:xfrm xmlns:a="http://schemas.openxmlformats.org/drawingml/2006/main"> <a:off x="0" y="0"/> <a:ext cx="897600" cy="897600"/> </a:xfrm> <a:prstGeom prst="rect"><a:avLst/></a:prstGeom> </xdr:spPr> </xdr:pic> <xdr:clientData/> </xdr:twoCellAnchor>`; return { drawingContent, relationships }; } ``` 上述代码通过构建特定格式的XML字符串实现了向指定单元格位置插入图片的效果[^5]。 #### 3. 配置响应头解决乱码问题 如果遇到中文字符显示异常的情况，则需调整HTTP请求配置中的 `responseType` 参数设置为 `'blob'` 并确保服务器返回的内容编码正确无误[^4]。 ```javascript export function export_data(query) { return request({ url: '/api/export/excel', method: 'post', data: query, responseType: 'blob' }); } ``` #### 4. 实现完整的导出流程 最后一步就是把所有的部分组合起来形成最终解决方案。下面给出了一段综合性的例子展示如何调用前面提到的各种组件和服务来进行实际应用开发过程中的具体实践步骤说明如下所示: ```javascript async function handleExport() { try { const wb = XLSX.utils.book_new(); // 获取表格原始数据 const jsonData = [ ['Name', 'Age'], ['Tom', 20], ['Jerry', 18] ]; // 将JSON转成worksheet const ws = XLSX.utils.json_to_sheet(jsonData); // 插入一张测试图片至B2单元格 const imgRelInfo = await addImageToSheet(ws, '../assets/logo.png', 'B2'); // 更新workbook内部链接映射关系 updateWorkbookRels(wb, imgRelInfo.relationships); // 合并所有新增加的部分进入整体档案体系当中去 mergeDrawingsIntoWorkbook(wb, imgRelInfo.drawingContent); // 输出Excel文件流给客户端下载 XLSX.writeFile(wb, 'example.xlsx'); } catch (error) { console.error('Error during exporting:', error.message); } } // 辅助更新整个文档的关系链路信息 function updateWorkbookRels(workbook, newRelationships){ workbook.Props.Rels = [...new Set([...workbook.Props.Rels || [], ...newRelationships])]; } // 把图表绘制相关内容加入到总项目集合之中 function mergeDrawingsIntoWorkbook(workbook, drawingsXmlString){ if (!workbook.DrawingParts) workbook.DrawingParts=[]; workbook.DrawingParts.push(drawingsXmlString); } ``` 以上即是在Vue3框架环境下利用Element Plus插件配合其他第三方类库达成含图形装饰效果电子表格自动化生产的全过程介绍[^5]。 ---