在后臺管理系統中常常遇到導出列表詳情的需求，之前遇到的項目都是后端出接口，前端調用就可以了。這次合作的后端堅持要前端處理導出，因為沒有做過這方面，還是弄了好久，所以記錄一下如何使用。
導入依賴

// npm npm install -S file-saver xlsx npm install xlsx-style --save npm install -D script-loader

導入Export2Excel.js

/* eslint-disable */ require("script-loader!file-saver"); // import XLSX from 'xlsx-style' import XLSX from "yxg-xlsx-style"; function generateArray(table) {var out = [];var rows = table.querySelectorAll("tr");var ranges = [];for (var R = 0; R < rows.length; ++R) {var outRow = [];var row = rows[R];var columns = row.querySelectorAll("td");for (var C = 0; C < columns.length; ++C) {var cell = columns[C];var colspan = cell.getAttribute("colspan");var rowspan = cell.getAttribute("rowspan");var cellValue = cell.innerText;if (cellValue !== "" && cellValue == +cellValue) cellValue = +cellValue;//Skip rangesranges.forEach(function(range) {if (R >= range.s.r && R <= range.e.r && outRow.length >= range.s.c && outRow.length <= range.e.c) {for (var i = 0; i <= range.e.c - range.s.c; ++i) outRow.push(null);}});//Handle Row Spanif (rowspan || colspan) {rowspan = rowspan || 1;colspan = colspan || 1;ranges.push({s: {r: R,c: outRow.length},e: {r: R + rowspan - 1,c: outRow.length + colspan - 1}});}//Handle ValueoutRow.push(cellValue !== "" ? cellValue : null);//Handle Colspanif (colspan) for (var k = 0; k < colspan - 1; ++k) outRow.push(null);}out.push(outRow);}return [out, ranges]; } function datenum(v, date1904) {if (date1904) v += 1462;var epoch = Date.parse(v);return (epoch - new Date(Date.UTC(1899, 11, 30))) / (24 * 60 * 60 * 1000); } function sheet_from_array_of_arrays(data, opts) {var ws = {};var range = {s: {c: 10000000,r: 10000000},e: {c: 0,r: 0}};for (var R = 0; R != data.length; ++R) {for (var C = 0; C != data[R].length; ++C) {if (range.s.r > R) range.s.r = R;if (range.s.c > C) range.s.c = C;if (range.e.r < R) range.e.r = R;if (range.e.c < C) range.e.c = C;var cell = {v: data[R][C]};if (cell.v == null) continue;var cell_ref = XLSX.utils.encode_cell({c: C,r: R});if (typeof cell.v === "number") cell.t = "n";else if (typeof cell.v === "boolean") cell.t = "b";else if (cell.v instanceof Date) {cell.t = "n";cell.z = XLSX.SSF._table[14];cell.v = datenum(cell.v);} else cell.t = "s";ws[cell_ref] = cell;}}if (range.s.c < 10000000) ws["!ref"] = XLSX.utils.encode_range(range);return ws; } function Workbook() {if (!(this instanceof Workbook)) return new Workbook();this.SheetNames = [];this.Sheets = {}; } function s2ab(s) {var buf = new ArrayBuffer(s.length);var view = new Uint8Array(buf);for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xff;return buf; } export function export_table_to_excel(id) {var theTable = document.getElementById(id);var oo = generateArray(theTable);var ranges = oo[1];/* original data */var data = oo[0];var ws_name = "SheetJS";var wb = new Workbook(),ws = sheet_from_array_of_arrays(data);/* add ranges to worksheet */// ws['!cols'] = ['apple', 'banan'];ws["!merges"] = ranges;/* add worksheet to workbook */wb.SheetNames.push(ws_name);wb.Sheets[ws_name] = ws;var wbout = XLSX.write(wb, {bookType: "xlsx",bookSST: false,type: "binary"});saveAs(new Blob([s2ab(wbout)], {type: "application/octet-stream"}),"test.xlsx"); } export function export_json_to_excel({title,multiHeader = [],header,data,filename,merges = [],autoWidth = true,bookType = "xlsx" } = {}) {/* original data */filename = filename || "excel-list";data = [...data];data.unshift(header);data.unshift(title);for (let i = multiHeader.length - 1; i > -1; i--) {data.unshift(multiHeader[i]);}var ws_name = "SheetJS";var wb = new Workbook(),ws = sheet_from_array_of_arrays(data);if (merges.length > 0) {if (!ws["!merges"]) ws["!merges"] = [];merges.forEach(item => {ws["!merges"].push(XLSX.utils.decode_range(item));});}if (autoWidth) {/*設置worksheet每列的最大寬度*/const colWidth = data.map(row =>row.map(val => {/*先判斷是否為null/undefined*/if (val == null) {return {wch: 10};} else if (val.toString().charCodeAt(0) > 255) {/*再判斷是否為中文*/return {wch: val.toString().length * 2};} else {return {wch: val.toString().length};}}));/*以第一行為初始值*/let result = colWidth[0];for (let i = 1; i < colWidth.length; i++) {for (let j = 0; j < colWidth[i].length; j++) {if (result[j] && result[j]["wch"] < colWidth[i][j]["wch"]) {result[j]["wch"] = colWidth[i][j]["wch"];}}}ws["!cols"] = result;}/* add worksheet to workbook */wb.SheetNames.push(ws_name);wb.Sheets[ws_name] = ws;var dataInfo = wb.Sheets[wb.SheetNames[0]];const borderAll = {//單元格外側框線top: {style: "thin"},bottom: {style: "thin"},left: {style: "thin"},right: {style: "thin"}};//給所有單元格加上邊框for (var i in dataInfo) {if (i == "!ref" || i == "!merges" || i == "!cols" || i == "A1") {} else {dataInfo[i + ""].s = {border: borderAll,alignment: {horizontal: "center",vertical: "center"}};}}// 去掉標題邊框let arr = ["A1","B1","C1","D1","E1","F1","G1","H1","I1","J1","K1","L1","M1","N1","O1","P1","Q1","R1","S1","T1","U1","V1","W1","X1","Y1","Z1","AA1","AB1","AC1"];arr.some(function(v) {let a = merges[0].split(":");if (v == a[1]) {dataInfo[v].s = {};return true;} else {dataInfo[v].s = {};}});//設置主標題樣式dataInfo["A1"].s = {font: {name: "宋體",sz: 18,color: { rgb: "000000" },bold: true,italic: false,underline: false},alignment: {horizontal: "center",vertical: "center"}// fill: {// fgColor: {rgb: "008000"},// },};// console.log(merges)var wbout = XLSX.write(wb, {bookType: bookType,bookSST: false,type: "binary"});saveAs(new Blob([s2ab(wbout)], {type: "application/octet-stream"}),`${filename}.${bookType}`); }

使用
此處用項目做案例，import的路徑是你存儲JS文件的路徑

const title = [`訪客用餐統計`, "", "", ""]const tHeader = ['用餐日期', '早餐人數', '午餐人數', '晚餐人數']const merges = ["A1:D1"]const filterVal = ['dineDate', 'breakfast', 'lunch', 'dinner']import("@/vendor/Export2Excel").then(excel => {const data = this.formatJson(filterVal, list)excel.export_json_to_excel({title: title,header: tHeader,data: [...data],merges,filename: `訪客用餐統計` || "表格",autoWidth: true,bookType: "xlsx"})})

功能升級需要統計各類的總數
添加表尾

// 計算表尾合計const sumArr = ["合計", "", "", "", "", breakfastRegister, lunchRegister, dinnerRegister, eatBreakfast, eatLunch, eatDinner]

前幾行進行合并

const totalStr = "A" + (list.length + 3) + ":E" + (list.length + 3)merges.push(totalStr)

具體的統計總數過程根據自身業務邏輯處理。

總結

以上是生活随笔為你收集整理的前端vue导出excel的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。