Vue中手动导出Element表格为pdf/word/excel格式

2023-12-22 04:47| 来源: 网络整理| 查看: 265

在vue中将element的表格进行导出为pdf/word/excel样式，需要进行一些处理，比较麻烦

网页样式在这里插入图片描述导出为表格导出为word 导出为PDF

一、编写工具函数和前置对element样式的修改函数

@param {String} inerHTML 需要导出的html字段 @param {String} typeName 需要导出的文件类型 (注意最外层需要一个单独的容器包裹,使用)

// 导出函数 export function exportFileByInerHTML(inerHTML, typeName) { const dateTime = new Date(); const dateTimeStr = dateTime.getFullYear() + "-" + dateTime.getMonth() + "-" + dateTime.getDay(); let blob; try { //word文档为msword,docx为vnd,pdf文档为pdf,msexcel 为excel blob = new Blob([inerHTML], { type: "application/file" }); } catch (e) { if (typeof console !== "undefined") { this.$message.error("导出失败"); console.log(e); } } let objectUrl = URL.createObjectURL(blob); let link = document.createElement("a"); let fname = `表格_${dateTimeStr}.${typeName}`; //下载文件的名字 link.href = objectUrl; link.setAttribute("download", fname); document.body.appendChild(link); link.click(); }

1. 因为表格只支持最原生的border，但是element的样式没有设置，并且最右侧和底部是没有线条的，然后最右侧和底部被element的css样式的before和after覆盖了，我们都要自己去设置和清除 2. element表格其实是两个table组成，第一个table是表头，第二个table是内容，我们要把第一个的tr放到第二个的table里面，导出结束后复原。

打印pdf需要进行的样式修改，通过vuedata中 { isPrintToPdfFlag: false}来控制‘ 在的外层加一个class标识符

【本文地址】

公司简介

联系我们