vue3 導出數據為 excel 文件

文章目錄

安裝插件
封裝組件 -- Export2Excel.js
多表封裝
界面使用 -- 數據處理成二維數組
更多

菜鳥最近做了一個需求，就是需要上傳表單并識別，然后識別出來的內容要可以修改，然后想的就是識別內容變成 form 表單，所以并沒有使用 SpreadJS ，這個 SpreadJS 有很多 excel 的功能，強大是強大，就是我這個需求沒有那么復雜！

然后上傳識別交給后端處理了，菜鳥做的就是查看詳情的是時候可把表單展示的數據導出成 excel 文件就行！

安裝插件

npm i xlsx
npm install -S file-saver

封裝組件 – Export2Excel.js

import { saveAs } from 'file-saver'
import * as XLSX from 'xlsx'/**** @param {Object} workbook 工作薄* @param {Object} worksheet 工作表* @param {Object} cell 單元格* 標記，引用單元格時所使用的地址格式（如：A1、C7）*/
function datenum (v, date1904) {if (date1904) v += 1462var epoch = Date.parse(v)return (epoch - new Date(Date.UTC(1899, 11, 30))) / (24 * 60 * 60 * 1000)
}function sheetFromArrayOfArrays (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 = Rif (range.s.c > C) range.s.c = Cif (range.e.r < R) range.e.r = Rif (range.e.c < C) range.e.c = Cvar cell = {v: data[R][C] // v表示單元格原始值， t表示內容類型，s-string類型，n-number類型，b-boolean類型，d-date類型，等等}if (cell.v == null) continue/*** 通過地址對象 { r: R, c: C } 來獲取單元格，R 和 C 分別代表從 0 開始的行和列的索引。* XLSX.utils 中的 encode_cell/decode_cell 方法可以轉換單元格地址*    XLSX.utils.encode_cell({ r: 7, c: 2 })  ===》 C7*/var cellRef = 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[cellRef] = cell}}// ws['!ref']：表示所有單元格的范圍，例如從A1到F8則記錄為A1:F8if (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 = {}
}// 字符串轉為ArrayBuffer
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) & 0xFFreturn buf
}/**** @param {Array} multiHeader  多行表頭* @param {Array} header  表頭* @param {Array} data  數據* @param {String} filename  文件名* @param {Array} merges  合并單元格* @param {Boolean} autoWidth  是否設置單元格寬度* @param {String} bookType  要生成的文件類型*/
export function exportJsonToExcel ({multiHeader = [],header,data,filename,merges = [],autoWidth = true,bookType = 'xlsx'
} = {}) {filename = filename || 'excel-list'data = [...data]data.unshift(header)for (let i = multiHeader.length - 1; i > -1; i--) {data.unshift(multiHeader[i])}var wsName = 'SheetJS'var wb = new Workbook()var ws = sheetFromArrayOfArrays(data)if (merges.length > 0) {// ws[!merges]：存放一些單元格合并信息，是一個數組，每個數組由包含s和e構成的對象組成，s表示開始，e表示結束，r表示行，c表示列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']設置單元格寬度, [{'wch': 10},{'wch': 10}] ===> 第一列和第二列設置了寬度ws['!cols'] = result}/* add worksheet to workbook */wb.SheetNames.push(wsName)wb.Sheets[wsName] = wsvar wbout = XLSX.write(wb, {bookType: bookType,bookSST: false, // 是否生成Shared String Table，官方解釋是，如果開啟生成速度會下降，但在低版本IOS設備上有更好的兼容性type: 'binary'})saveAs(new Blob([s2ab(wbout)], { type: 'application/octet-stream' }),`${filename}.${bookType}`)
}

此處參考：vue3中將數據導出為excel表格

多表封裝

但是菜鳥的需求是要一個 excel 包含兩個表，所以菜鳥對其進行了優化：

import { saveAs } from "file-saver";
import * as XLSX from "xlsx";/**** @param {Object} workbook 工作薄* @param {Object} worksheet 工作表* @param {Object} cell 單元格* 標記，引用單元格時所使用的地址格式（如：A1、C7）*/
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);
}// eslint-disable-next-line
function sheetFromArrayOfArrays(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], // v表示單元格原始值， t表示內容類型，s-string類型，n-number類型，b-boolean類型，d-date類型，等等};if (cell.v == null) continue;/*** 通過地址對象 { r: R, c: C } 來獲取單元格，R 和 C 分別代表從 0 開始的行和列的索引。* XLSX.utils 中的 encode_cell/decode_cell 方法可以轉換單元格地址*    XLSX.utils.encode_cell({ r: 7, c: 2 })  ===》 C7*/var cellRef = 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[cellRef] = cell;}}// ws['!ref']：表示所有單元格的范圍，例如從A1到F8則記錄為A1:F8if (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 = {};
}// 字符串轉為ArrayBuffer
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;
}/**** @param {Array} multiHeader  多行表頭* @param {Array} header  表頭* @param {Array} data  數據* @param {String} filename  文件名* @param {Array} merges  合并單元格* @param {Boolean} autoWidth  是否設置單元格寬度* @param {String} bookType  要生成的文件類型*/
export function exportJsonToExcel({multiHeader = [],header,data,filename,sheetname,merges = [],autoWidth = true,bookType = "xlsx",
} = {}) {filename = filename || "excel-list";for (let i in header) {data[i] = [...data[i]];data[i].unshift(header[i]);}for (let j in data) {for (let i = multiHeader.length - 1; i > -1; i--) {data[j].unshift(multiHeader[i]);}}let wsName = [];for (let i in sheetname) {wsName.push(sheetname[i]);}var wb = new Workbook();let ws = [];for (let i in data) {ws.push(sheetFromArrayOfArrays(data[i]));}if (merges.length > 0) {// ws[!merges]：存放一些單元格合并信息，是一個數組，每個數組由包含s和e構成的對象組成，s表示開始，e表示結束，r表示行，c表示列for (let i in ws) {if (!ws[i]["!merges"]) ws["!merges"] = [];merges.forEach((item) => {ws[i]["!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']設置單元格寬度, [{'wch': 10},{'wch': 10}] ===> 第一列和第二列設置了寬度for (let i in ws) {ws[i]["!cols"] = result;}}/* add worksheet to workbook */for (let i in wsName) {wb.SheetNames.push(wsName[i]);wb.Sheets[wsName[i]] = ws[i];}var wbout = XLSX.write(wb, {bookType: bookType,bookSST: false, // 是否生成Shared String Table，官方解釋是，如果開啟生成速度會下降，但在低版本IOS設備上有更好的兼容性type: "binary",});saveAs(new Blob([s2ab(wbout)], { type: "application/octet-stream" }), `${filename}.${bookType}`);
}

界面使用 – 數據處理成二維數組

第一個的使用直接參考別人的，我這里使用的是菜鳥封裝的，如果有誤，可以留言，菜鳥進行更改，因為菜鳥這里只測試了一個和兩個表格的情況

// 數據處理  --》 讀者按照自己的邏輯來
for (const key in envFactors.value) {let data1 = []; //設置一個二級列表，導出的表格每一行為一個二級列表for (let i in objkeyArr.value) {let keyname = objkeyArr.value[i];data1.push(envFactors.value[key][keyname]);}data2.value.push(data1); //把二級列表塞入一級列表
}
console.log(data2); // data2 必須是二維數組for (const key in sampleGroups.value) {let data1 = [];data1.push(sampleGroups.value[key].sampleTestName,sampleGroups.value[key].sampleAnalysisName,sampleGroups.value[key].groupFirstWay,sampleGroups.value[key].groupSecWay,sampleGroups.value[key].groupThirdWay,sampleGroups.value[key].groupFourthWay,sampleGroups.value[key].groupFifthWay);data3.value.push(data1);
}
console.log(data3);
// 數據處理結束// 導出成表格
function exportExcel() {exportJsonToExcel({header: [["檢測報告樣品名稱","分析樣品名稱","分組名稱","分組名稱","分組名稱","分組名稱","分組名稱",],objkeyArr.value,], // 表名個數可以不等于數據每一行的列數filename: "詳請表",data: [data3.value, data2.value],sheetname: ["樣品分組表", "環境因子表"],});
}