然后再建一个downlodad.js
发布时间：2025-06-24 18:04:55 作者：北方职教升学中心 阅读量：413
然后再建一个downlodad.js。
实际上并不难，整体架构流程。npm i xlsx xlsx-style file-saver。 在src目录下新建 utils文件夹，
技术细节。
第二步: 由于excel导出在很多地方使用，
npm i xlsx xlsx-style file-saver。 在src目录下新建 utils文件夹，
技术细节。 在网上看了很多帖子，
概要。然后找出问题才能达到效果。技术细节。
the method has been removed in JSZip 3.0,please check the upgrade guide。在 vue项目.config.编写js中的代码：。
小结。 操作问题：。
}。
。我遇到了一个技术点。
解释技术名词。import FileSaver from "file-saver";import XLSX from "xlsx";import XLSXSTYLE from "xlsx-style"function outputXLSX(filename, tableDataId, rowValue, column, width) { let table = document.getElementById(tableDataId); let clonedTable = table.cloneNode(true); if (clonedTable.querySelector(".el-table__fixed")) { clonedTable.removeChild(clonedTable.querySelector(".el-tanle__fixed")); } let headerRows = clonedTable.querySelectorAll( ".el-table__header-wrapper > table > thead > tr" ); Array.from(headerRows).forEach((headerRows) => { let columns = headerRows.querySelectorAll(".el-table__cell"); Array.from(columns).forEach((column) => { if (column.classList.contains("gutter")) { column.remove(); } }); }); let ws = XLSX.utils.table_to_sheet(clonedTable); let wb2 = XLSX.utils.book_new(); XLSX.utils.book_append_sheet(wb2, ws, filename); setExlStyle(wb2["Sheets"][filename], width); let wb_out = XLSXSTYLE.write(wb2, { type: "buffer", bookSST: true }); try { FileSaver.saveAs( new Blob([wb_out], { type: "application/octet-stream" }), filename + ".et" ); } catch (e) { console.log(e, wb_out); } return wb_out;}function setExlStyle(data, px) { px = px ? px : 120; let borderAll = { top: { style: "thin" }, bottom: { style: "thin" }, left: { style: "thin" }, right: { style: "thin" }, }; data["!cols"] = []; for (let key in data) { let col = "000000"; if (data[key] instanceof Object) { if (data[key].v < 0) { col = "ff0000"; } else { col = "000000"; } data[key].s = { border: borderAll, alignment: { horizontal: "center", vertical: "center", }, font: { color: { rgb: col, }, sz: 11, }, bold: true, numFmt: 0, }; data["!cols"].push({ wpx: px, }); } } return data;}export default { outputXLSX,};
import FileSaver from "file-saver";import XLSX from "xlsx";import XLSXSTYLE from "xlsx-style"function outputXLSX(filename, tableDataId, rowValue, column, width) { let table = document.getElementById(tableDataId); let clonedTable = table.cloneNode(true); if (clonedTable.querySelector(".el-table__fixed")) { clonedTable.removeChild(clonedTable.querySelector(".el-tanle__fixed")); } let headerRows = clonedTable.querySelectorAll( ".el-table__header-wrapper > table > thead > tr" ); Array.from(headerRows).forEach((headerRows) => { let columns = headerRows.querySelectorAll(".el-table__cell"); Array.from(columns).forEach((column) => { if (column.classList.contains("gutter")) { column.remove(); } }); }); let ws = XLSX.utils.table_to_sheet(clonedTable); let wb2 = XLSX.utils.book_new(); XLSX.utils.book_append_sheet(wb2, ws, filename); setExlStyle(wb2["Sheets"][filename], width); let wb_out = XLSXSTYLE.write(wb2, { type: "buffer", bookSST: true }); try { FileSaver.saveAs( new Blob([wb_out], { type: "application/octet-stream" }), filename + ".et" ); } catch (e) { console.log(e, wb_out); } return wb_out;}function setExlStyle(data, px) { px = px ? px : 120; let borderAll = { top: { style: "thin" }, bottom: { style: "thin" }, left: { style: "thin" }, right: { style: "thin" }, }; data["!cols"] = []; for (let key in data) { let col = "000000"; if (data[key] instanceof Object) { if (data[key].v < 0) { col = "ff0000"; } else { col = "000000"; } data[key].s = { border: borderAll, alignment: { horizontal: "center", vertical: "center", }, font: { color: { rgb: col, }, sz: 11, }, bold: true, numFmt: 0, }; data["!cols"].push({ wpx: px, }); } } return data;}export default { outputXLSX,};然后保存调用。
文章目录。 。cols"].push({ wpx: px, }); } } return data;}export default { outputXLSX,};然后保存和调用。
vue2 + element-ui 。只使用前端导出数据。
externals: { './cptable': 'var cptable' }。
第一步: 下载插件 。
- 概要。最后选择了xlsx , file-saver , xlsx-style 这三个插件可以满足项目需求。 。
}。
解决方案: 这个问题是因为jszip的插件版本太高，
然后下载相应的版本使用。
bug解决方案-使用此东西时有两个bug。
configureWebpack: {。 运行问题: 。前端excel的纯导出功能不与后端交互，属性包装js文件。 第二个bug，
解决方案是，
* ./cptable in ./node_modules/xlsx-style/dist/cpexcel.js。就是遇到问题要仔细阅读英文翻译， 全局搜索jszip。
今天，
- 整体架构流程。 第一个bug，
- 概要。最后选择了xlsx , file-saver , xlsx-style 这三个插件可以满足项目需求。 。
