\u5b89\u88c5\uff1a<\/p>\n
\"xlsx\": \"^0.14.1\"\r\n\"file-saver\": \"^2.0.1\",<\/pre>\n<\/p>\n
\u521b\u5efaExport2Excel.js<\/p>\n
\/* eslint-disable *\/\r\nimport { saveAs } from 'file-saver'\r\nimport XLSX from 'xlsx'\r\n\r\nfunction generateArray(table) {\r\n var out = [];\r\n var rows = table.querySelectorAll('tr');\r\n var ranges = [];\r\n for (var R = 0; R < rows.length; ++R) {\r\n var outRow = [];\r\n var row = rows[R];\r\n var columns = row.querySelectorAll('td');\r\n for (var C = 0; C < columns.length; ++C) {\r\n var cell = columns[C];\r\n var colspan = cell.getAttribute('colspan');\r\n var rowspan = cell.getAttribute('rowspan');\r\n var cellValue = cell.innerText;\r\n if (cellValue !== \"\" && cellValue == +cellValue) cellValue = +cellValue;\r\n\r\n \/\/Skip ranges\r\n ranges.forEach(function (range) {\r\n if (R >= range.s.r && R <= range.e.r && outRow.length >= range.s.c && outRow.length <= range.e.c) {\r\n for (var i = 0; i <= range.e.c - range.s.c; ++i) outRow.push(null);\r\n }\r\n });\r\n\r\n \/\/Handle Row Span\r\n if (rowspan || colspan) {\r\n rowspan = rowspan || 1;\r\n colspan = colspan || 1;\r\n ranges.push({\r\n s: {\r\n r: R,\r\n c: outRow.length\r\n },\r\n e: {\r\n r: R + rowspan - 1,\r\n c: outRow.length + colspan - 1\r\n }\r\n });\r\n };\r\n\r\n \/\/Handle Value\r\n outRow.push(cellValue !== \"\" ? cellValue : null);\r\n\r\n \/\/Handle Colspan\r\n if (colspan)\r\n for (var k = 0; k < colspan - 1; ++k) outRow.push(null);\r\n }\r\n out.push(outRow);\r\n }\r\n return [out, ranges];\r\n};\r\n\r\nfunction datenum(v, date1904) {\r\n if (date1904) v += 1462;\r\n var epoch = Date.parse(v);\r\n return (epoch - new Date(Date.UTC(1899, 11, 30))) \/ (24 * 60 * 60 * 1000);\r\n}\r\n\r\nfunction sheet_from_array_of_arrays(data, opts) {\r\n var ws = {};\r\n var range = {\r\n s: {\r\n c: 10000000,\r\n r: 10000000\r\n },\r\n e: {\r\n c: 0,\r\n r: 0\r\n }\r\n };\r\n for (var R = 0; R != data.length; ++R) {\r\n for (var C = 0; C != data[R].length; ++C) {\r\n if (range.s.r > R) range.s.r = R;\r\n if (range.s.c > C) range.s.c = C;\r\n if (range.e.r < R) range.e.r = R;\r\n if (range.e.c < C) range.e.c = C;\r\n var cell = {\r\n v: data[R][C]\r\n };\r\n if (cell.v == null) continue;\r\n var cell_ref = XLSX.utils.encode_cell({\r\n c: C,\r\n r: R\r\n });\r\n\r\n if (typeof cell.v === 'number') cell.t = 'n';\r\n else if (typeof cell.v === 'boolean') cell.t = 'b';\r\n else if (cell.v instanceof Date) {\r\n cell.t = 'n';\r\n cell.z = XLSX.SSF._table[14];\r\n cell.v = datenum(cell.v);\r\n } else cell.t = 's';\r\n\r\n ws[cell_ref] = cell;\r\n }\r\n }\r\n if (range.s.c < 10000000) ws['!ref'] = XLSX.utils.encode_range(range);\r\n return ws;\r\n}\r\n\r\nfunction Workbook() {\r\n if (!(this instanceof Workbook)) return new Workbook();\r\n this.SheetNames = [];\r\n this.Sheets = {};\r\n}\r\n\r\nfunction s2ab(s) {\r\n var buf = new ArrayBuffer(s.length);\r\n var view = new Uint8Array(buf);\r\n for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;\r\n return buf;\r\n}\r\n\r\nexport function export_table_to_excel(id) {\r\n var theTable = document.getElementById(id);\r\n var oo = generateArray(theTable);\r\n var ranges = oo[1];\r\n\r\n \/* original data *\/\r\n var data = oo[0];\r\n var ws_name = \"SheetJS\";\r\n\r\n var wb = new Workbook(),\r\n ws = sheet_from_array_of_arrays(data);\r\n\r\n \/* add ranges to worksheet *\/\r\n \/\/ ws['!cols'] = ['apple', 'banan'];\r\n ws['!merges'] = ranges;\r\n\r\n \/* add worksheet to workbook *\/\r\n wb.SheetNames.push(ws_name);\r\n wb.Sheets[ws_name] = ws;\r\n\r\n var wbout = XLSX.write(wb, {\r\n bookType: 'xlsx',\r\n bookSST: false,\r\n type: 'binary'\r\n });\r\n\r\n saveAs(new Blob([s2ab(wbout)], {\r\n type: \"application\/octet-stream\"\r\n }), \"test.xlsx\")\r\n}\r\n\r\nexport function export_json_to_excel({\r\n multiHeader = [],\r\n header,\r\n data,\r\n filename,\r\n merges = [],\r\n autoWidth = true,\r\n bookType = 'xlsx'\r\n} = {}) {\r\n \/* original data *\/\r\n filename = filename || 'excel-list'\r\n data = [...data]\r\n data.unshift(header);\r\n\r\n for (let i = multiHeader.length - 1; i > -1; i--) {\r\n data.unshift(multiHeader[i])\r\n }\r\n\r\n var ws_name = \"SheetJS\";\r\n var wb = new Workbook(),\r\n ws = sheet_from_array_of_arrays(data);\r\n\r\n if (merges.length > 0) {\r\n if (!ws['!merges']) ws['!merges'] = [];\r\n merges.forEach(item => {\r\n ws['!merges'].push(XLSX.utils.decode_range(item))\r\n })\r\n }\r\n\r\n if (autoWidth) {\r\n \/*\u8bbe\u7f6eworksheet\u6bcf\u5217\u7684\u6700\u5927\u5bbd\u5ea6*\/\r\n const colWidth = data.map(row => row.map(val => {\r\n \/*\u5148\u5224\u65ad\u662f\u5426\u4e3anull\/undefined*\/\r\n if (val == null) {\r\n return {\r\n 'wch': 10\r\n };\r\n }\r\n \/*\u518d\u5224\u65ad\u662f\u5426\u4e3a\u4e2d\u6587*\/\r\n else if (val.toString().charCodeAt(0) > 255) {\r\n return {\r\n 'wch': val.toString().length * 2\r\n };\r\n } else {\r\n return {\r\n 'wch': val.toString().length\r\n };\r\n }\r\n }))\r\n \/*\u4ee5\u7b2c\u4e00\u884c\u4e3a\u521d\u59cb\u503c*\/\r\n let result = colWidth[0];\r\n for (let i = 1; i < colWidth.length; i++) {\r\n for (let j = 0; j < colWidth[i].length; j++) {\r\n if (result[j]['wch'] < colWidth[i][j]['wch']) {\r\n result[j]['wch'] = colWidth[i][j]['wch'];\r\n }\r\n }\r\n }\r\n ws['!cols'] = result;\r\n }\r\n\r\n \/* add worksheet to workbook *\/\r\n wb.SheetNames.push(ws_name);\r\n wb.Sheets[ws_name] = ws;\r\n\r\n var wbout = XLSX.write(wb, {\r\n bookType: bookType,\r\n bookSST: false,\r\n type: 'binary'\r\n });\r\n saveAs(new Blob([s2ab(wbout)], {\r\n type: \"application\/octet-stream\"\r\n }), `${filename}.${bookType}`);\r\n}\r\n<\/pre>\n<\/p>\n
\u8c03\u7528\uff1a<\/p>\n
<button @click=\"handleDownload\">\u5bfc\u51fa<\/button>\r\n\r\nmethods:{\r\n formatJson(filterVal, jsonData) {\r\n return jsonData.map(v => filterVal.map(j => v[j]))\r\n },\r\n handleDownload() {\r\n\r\n\r\n import('@\/vendor\/Export2Excel').then(excel => {\r\n const tHeader = ['Id', 'Title', 'Author', 'Readings', 'Datexx'] \/\/\u8f93\u51faexcel\u6807\u9898\u540d\u79f0\r\n const filterVal = ['id', 'title', 'author', 'pageviews', 'display_time'] \/\/\u5bfc\u51fa\u63a5\u53e3\u9700\u8981\u7684\u5b57\u6bb5\u6570\u636e\r\n const list = [ \/\/\u8fd9\u91cc\u662f\u63a5\u53e3\u7684\u6570\u636e\r\n {\r\n \"id\": 1,\r\n \"timestamp\": 240465038835,\r\n \"author\": \"Paul\",\r\n \"reviewer\": \"Timothy\",\r\n \"title\": \"Cmvgziy Ppfjp Quomqwlknl Uuaved Dytxd Yxxbcbfl\",\r\n \"content_short\": \"mock data\",\r\n \"content\": \"<p>I am testing data, I am testing data.<\/p><p><img src=\\\"https:\/\/wpimg.wallstcn.com\/4c69009c-0fd4-4153-b112-6cb53d1cf943\\\"><\/p>\",\r\n \"forecast\": 1.88,\r\n \"importance\": 3,\r\n \"type\": \"US\",\r\n \"status\": \"published\",\r\n \"display_time\": \"1984-09-11 00:16:49\",\r\n \"comment_disabled\": true,\r\n \"pageviews\": 3976,\r\n \"image_uri\": \"https:\/\/wpimg.wallstcn.com\/e4558086-631c-425c-9430-56ffb46e70b3\",\r\n \"platforms\": [\r\n \"a-platform\"\r\n ]\r\n },\r\n {\r\n \"id\": 4,\r\n \"timestamp\": 166392986060,\r\n \"author\": \"Jennifer\",\r\n \"reviewer\": \"Donna\",\r\n \"title\": \"Mqqe Ddydjien Txyfrpmpr Icoabnit Bxqndulp Fuow Cbqp Qpkxbwc\",\r\n \"content_short\": \"mock data\",\r\n \"content\": \"<p>I am testing data, I am testing data.<\/p><p><img src=\\\"https:\/\/wpimg.wallstcn.com\/4c69009c-0fd4-4153-b112-6cb53d1cf943\\\"><\/p>\",\r\n \"forecast\": 19.72,\r\n \"importance\": 2,\r\n \"type\": \"EU\",\r\n \"status\": \"draft\",\r\n \"display_time\": \"1976-05-02 13:53:26\",\r\n \"comment_disabled\": true,\r\n \"pageviews\": 2201,\r\n \"image_uri\": \"https:\/\/wpimg.wallstcn.com\/e4558086-631c-425c-9430-56ffb46e70b3\",\r\n \"platforms\": [\r\n \"a-platform\"\r\n ]\r\n }\r\n ]\r\n const data = this.formatJson(filterVal, list)\r\n excel.export_json_to_excel({\r\n header: tHeader,\r\n data,\r\n filename: this.filename \/\/\u8bbe\u7f6e\u6587\u4ef6\u540d\r\n })\r\n \/\/ this.$refs.multipleTable.clearSelection()\r\n \/\/ this.downloadLoading = false\r\n })\r\n\r\n },\r\n}<\/pre>\n<\/p>\n