From 91fcf3275f18e77f760e2cd5dc9bddc81e213a47 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=8E=E6=9D=A8?= <1711467488@qq.com> Date: Sun, 11 Feb 2018 09:59:45 +0800 Subject: [PATCH] no message Former-commit-id: e90e0bcd2753758022b82eb377b3bebe3dfe1aaa Former-commit-id: 7a80c223ef003a5fe6de230609c2e3526d36292c Former-commit-id: 896d21ce1bbc6e41d9abd70b32d9608161f1d48c --- package.json | 4 +- src/pages/demo/plugins/tableExport/demo.vue | 7 + src/plugin/export/_blob.js | 179 ++++++++++++++++++++ src/plugin/export/_export2Excel.js | 160 +++++++++++++++++ src/plugin/export/index.js | 9 +- 5 files changed, 357 insertions(+), 2 deletions(-) create mode 100755 src/plugin/export/_blob.js create mode 100755 src/plugin/export/_export2Excel.js diff --git a/package.json b/package.json index 06fc3556..46386b15 100755 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "clipboard-polyfill": "^2.4.1", "countup.js": "^1.9.3", "element-ui": "^2.0.11", + "file-saver": "^1.3.3", "github-markdown-css": "^2.10.0", "highlight.js": "^9.12.0", "js-cookie": "^2.2.0", @@ -31,7 +32,8 @@ "vue-grid-layout": "^2.1.11", "vue-router": "^3.0.1", "vue-splitpane": "^1.0.2", - "vuex": "^3.0.1" + "vuex": "^3.0.1", + "xlsx": "^0.12.0" }, "devDependencies": { "autoprefixer": "^7.1.2", diff --git a/src/pages/demo/plugins/tableExport/demo.vue b/src/pages/demo/plugins/tableExport/demo.vue index 1a9366b7..db5341c9 100644 --- a/src/pages/demo/plugins/tableExport/demo.vue +++ b/src/pages/demo/plugins/tableExport/demo.vue @@ -9,6 +9,10 @@ 导出CSV + + + 导出Excel + 1 ? end : this.data.length) + , type + , this.encoding + ); + }; + FB_proto.toString = function() { + return "[object Blob]"; + }; + FB_proto.close = function() { + this.size = this.data.length = 0; + }; + return FakeBlobBuilder; + }(view)); + + view.Blob = function Blob(blobParts, options) { + var type = options ? (options.type || "") : ""; + var builder = new BlobBuilder(); + if (blobParts) { + for (var i = 0, len = blobParts.length; i < len; i++) { + builder.append(blobParts[i]); + } + } + return builder.getBlob(type); + }; +}(typeof self !== "undefined" && self || typeof window !== "undefined" && window || this.content || this)); diff --git a/src/plugin/export/_export2Excel.js b/src/plugin/export/_export2Excel.js new file mode 100755 index 00000000..11ae45b7 --- /dev/null +++ b/src/plugin/export/_export2Excel.js @@ -0,0 +1,160 @@ +/* eslint-disable */ +import FileSaver from 'file-saver' +import './_blob' +import XLSX from 'xlsx' + +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 ranges + ranges.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 Span + if (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 Value + outRow.push(cellValue !== "" ? cellValue : null); + + //Handle Colspan + if (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'}); + + FileSaver.saveAs(new Blob([s2ab(wbout)], {type: "application/octet-stream"}), "test.xlsx") +} + +export function export_json_to_excel(th, jsonData, defaultTitle) { + + /* original data */ + + var data = jsonData; + data.unshift(th); + var ws_name = "SheetJS"; + + var wb = new Workbook(), ws = sheet_from_array_of_arrays(data); + + /*设置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]['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 wbout = XLSX.write(wb, {bookType: 'xlsx', bookSST: false, type: 'binary'}); + var title = defaultTitle || 'excel-list' + FileSaver.saveAs(new Blob([s2ab(wbout)], {type: "application/octet-stream"}), title + ".xlsx") +} diff --git a/src/plugin/export/index.js b/src/plugin/export/index.js index a67ea4e0..b7f4faeb 100644 --- a/src/plugin/export/index.js +++ b/src/plugin/export/index.js @@ -1,10 +1,11 @@ // 库 import Csv from './_csv' import ExportCsv from './_export-csv' +import * as excel from './_export2Excel' export default { install (Vue, options) { - // 导出 Vue.prototype.$export = { + // 导出 CSV csv (params) { return new Promise((resolve, reject) => { // 默认值 @@ -23,6 +24,12 @@ export default { // 完成 resolve(data) }) + }, + // 导出 Excel + excel () { + const tHeader = ['Id', 'Title', 'Author', 'Readings', 'Date'] + const data = [] + excel.export_json_to_excel(tHeader, data, 'demo') } } }