前端vue2中的excel导出功能-file-saver,xlsx,xlsx-style的使用

文章目录

- 概要
- 整体架构流程
- 技术名词解释
- 技术细节
- 小结

概要

今天遇到了一个技术点.前端的excel的纯导出功能,不和后端交互,只用前端导出数据

整体架构流程

vue2 + element-ui

技术名词解释

在网上看了很多帖子,最后我选择了xlsx , file-saver , xlsx-style 这个三个插件完成项目需求

技术细节

第一步: 下载插件

npm i xlsx  xlsx-style  file-saver

第二步: 因为很多地方要用到excel导出,属性就封装一个js文件

在src目录下新建 utils文件夹,然后再新建一个download.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,
};

然后保存调用即可