傳統項目純前端實現導出excel之xlsx.js

?
????自從vue問世后，使得前端開發更加簡潔從容，極大的豐富組件樣式和頁面渲染效果，使得前端功能的可擴展性得到極大地加強。雖然vue的使用對于前后端分離的項目對于功能實現與擴展有了質的飛躍，但仍舊有些傳統的項目步履維艱，功能延伸性開發束手束腳，效率相對低下，就比如在某些mvc+jsp頁面要實現excel的導出功能，有時候會后端框架封裝的約束，這個時候直接在前端實現excel導出，就變的極為方便。本文介紹一款js插件——xlsx.bundle.js

一、簡介

xlsx.bundle.js 是一個與 xlsx 或 xlsx-js-style 等庫相關的 JavaScript 文件，通常用于在前端實現 Excel 文件的讀取、創建和導出等功能。

二、功能和用途

1. 文件讀取與寫入：xlsx.bundle.js 提供了讀取和寫入 Excel 文件的功能，支持多種格式，如 .xlsx、.xls、.csv 等。
2. 表格樣式設置：結合 xlsx-js-style，可以為表格設置樣式，例如字體、對齊方式、邊框、背景顏色等。
3. 單元格合并：支持合并單元格操作，可以通過指定范圍來合并單元格。
4. 數據處理：可以對表格中的數據進行處理，例如添加公式、數據驗證等。
5. 前端導出：可以直接在前端將數據導出為 Excel 文件，無需后端支持

三、excel導出示例

3.1 xlsx.bundle.js 下載及引入

下載到本地后進行使用，從github上下載，然后把其中的文件xlsx.bundle.js 拷貝你的項目，在項目中引入即可使用。

<script src="dist/xlsx.bundle.js"></script>

3.2 xlsx.bundle.js 使用

1.獲取dom元素

const tree = mini.get("excel-dom");

2.展開數據
由于此處要導出的數據是一個樹形的列表，因此需要將數據進行展開為同一維度。如果使用的數據不是樹形列表，可以忽略此步驟。

    const nodes = tree.getData(true); // 獲取所有展開的節點// 展平數據const flatNodes = flattenTasks(nodes);

3、轉為二維數組并添加序號

  // 轉換為二維數組，并添加序號let data = [["易耗物資消耗匯總統計表", "", "", "", "", "", "", "", ""],["類型：", "", "", "", "部門：", "", "", "統計期：", ""],["序號", "編號", "名稱", "規格型號", "單位", "平均單價", "去年同期消耗數量", "本期消耗數量", "本期與去年同期比較"]];flatNodes.forEach(function (node, index) {data.push([index + 1, node.code, node.name, node.type, node.unit, node.price, node.lastCostNum, node.currentCostNum, node.differenceValue]);});

4.創建工作簿并調整列寬

 // 創建工作簿對象const workbook = XLSX.utils.book_new();// 將二維數組轉換為worksheetconst worksheet = XLSX.utils.aoa_to_sheet(data);// 自動調整列寬autoFitColumns(worksheet, data);

5.表頭合并

 // 定義表頭合并區域worksheet['!merges'] = [{s: {r: 0, c: 0}, e: {r: 0, c: 8}}, // 序號{s: {r: 1, c: 1}, e: {r: 1, c: 3}}, // 橫向合并（第一行的二三四列合并）{s: {r: 1, c: 5}, e: {r: 1, c: 6}}, // 橫向合并 （第一行的六七兩列合并）];

s:表示開始，e:表示結束
r:表示行 （索引從0開始表示第一行） c:表示列（索引從0開始表示第一列）

6.excel行高設置

 // 動態設置行高let colWidths = worksheet['!cols'];worksheet['!rows'] = [];for (let i = 0; i < data.length; i++) {if (i == 0) {worksheet['!rows'].push({hpt: 35}); // 表頭行} else if (i == 1) {worksheet['!rows'].push({hpt: 20});  // 第2行行高設置} else {//動態計算行高let calculateLen = 1;for (let j = 0; j < data[i].length; j++) {const cellValue = data[i][j] === null ? '' : data[i][j];const cellLength = calculateCellWidth((cellValue + ""));const colWidth = colWidths[j] ? colWidths[j].wch : 10;const lines = Math.ceil(cellLength / colWidth);const maxLines = Math.max(1, lines);calculateLen = calculateLen > maxLines ? calculateLen : maxLines;}worksheet['!rows'].push({hpt: 18 * calculateLen}); // 設置行高}}

7、設置所有單元格的邊框樣式和對齊方式

    // 設置所有單元格的邊框樣式和對齊方式const range = XLSX.utils.decode_range(worksheet['!ref']);for (let R = range.s.r; R <= range.e.r; ++R) {for (let C = range.s.c; C <= range.e.c; ++C) {const cell_ref = XLSX.utils.encode_cell({r: R, c: C});if (!worksheet[cell_ref]) {continue;}// 設置單元格樣式worksheet[cell_ref].s = {border: {top: R >= 2 ? {style: "thin", color: {rgb: "000"}} : "",bottom: R >= 2 ? {style: "thin", color: {rgb: "000"}} : "",left: R >= 2 ? {style: "thin", color: {rgb: "000"}} : "",right: R >= 2 ? {style: "thin", color: {rgb: "000"}} : ""},alignment: {// horizontal: R === 0 || R === 2 || R === 3 ? 'center' : 'left', // 表頭居中，數據區域左對齊horizontal: (R === 0 || R === 2  || (cell_ref.startsWith('A') && cell_ref !== 'A2')) ? 'center' :(cell_ref === 'A2' || cell_ref === 'E2' ||  cell_ref === 'H2') ? 'right' : 'left',vertical: 'center', // 垂直對齊方式wrapText: true // 啟用自動換行},font: {name: R == 1 ? '宋體' : 'Calibri', //第二行使用宋體，其他行使用Calibrisz: R === 0 ? 16 : (R === 2 ) ? 14 : 12,bold: R === 0 ? true : (cell_ref === 'A2' || cell_ref === 'E2' ||  cell_ref === 'H2') ? true : false,color: {rgb: "000000"}},};}}

8、添加worksheet到workbook并輸出文件

 // 添加worksheet到workbookXLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');try {XLSX.writeFile(workbook, '易耗物資消耗匯總統計表.xlsx'); // 導出 workbook} catch (error) {console.error('Error writing Excel file:', error);}

9.其他相關函數

/*** 將嵌套的數組轉換為平面列表* 該函數通過遞歸遍歷每個任務及其子任務（如果存在），并將它們的信息提取到一個新的數組中* @param {Array} tasks - 嵌套的任務對象數組，每個任務對象可能包含一個子任務數組* @returns {Array} - 包含所有任務信息的平面列表數組，不包含任何嵌套結構*/
function flattenTasks(tasks) {let flatList = [];tasks.forEach(task => {// 將當前任務的相關屬性提取到一個新對象中，并添加到展平列表中flatList.push({id: task.id,code: task.code,name: task.name,type: task.type,unit: task.unit,price: task.price,lastCostNum: task.lastCostNum,currentCostNum: task.currentCostNum,differenceValue: task.differenceValue,});// 如果當前任務有子任務，則遞歸調用flattenTasks，并將結果合并到展平列表中if (task.children && task.children.length > 0) {flatList = flatList.concat(flattenTasks(task.children));}});return flatList;
}/*** 自動調整列寬* @param ws 工作表* @param data 數據*/
function autoFitColumns(ws, data) {const colWidths = data[0].map((_, i) => {return data.reduce((max, row) => {const cellValue = row[i] === null ? '' : row[i];const cellLength = calculateCellWidth(cellValue + "");return Math.max(max, cellLength);}, 10); // Minimum width of 10 characters});//自定義列寬if(colWidths){colWidths[0] = 12;colWidths[1] = 15;colWidths[5] = 13;colWidths[6] = 24;colWidths[7] = 18;colWidths[8] = 24;}ws['!cols'] = colWidths.map(width => ({wch: width}));
}/*** 計算單元格寬度* @param value 值* @returns {number} 列寬（磅）*/
function calculateCellWidth(value) {// 判斷是否為null或undefinedif (value == null) {return 10;} else if (/.*[\u4e00-\u9fa5]+.*$/.test(value)) {// 中文的長度const chineseLength = value.match(/[\u4e00-\u9fa5]/g).length;// 其他不是中文的長度const otherLength = value.length - chineseLength;return chineseLength * 2.1 + otherLength * 1.1;} else {return value.toString().length * 1.1;}
}

導出效果如下