This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money.
The front-end converts json data to Excel files for download
Step 1 Install required dependencies:
npm i file-saver xlsx -S
npm i script-loader -D
Copy the codeStep 2 requires loading two dependency packages:
Blob.js and Export2Excel. Js files
Baidu can download the two files, you can also directly copy the following code.
The blob.js code looks like this:
/* eslint-disable */
/* Blob.js
* A Blob implementation.
*
* By Eli Grey, http://eligrey.com
* By Devin Samarin, https://github.com/eboyjr
* License: X11/MIT
* See LICENSE.md
*/
/*global self, unescape */
/*jslint bitwise: true, regexp: true, confusion: true, es5: true, vars: true, white: true,
plusplus: true* / / *! @source http://purl.eligrey.com/github/Blob.js/blob/master/Blob.js */
(function (view) {
"use strict";
view.URL = view.URL || view.webkitURL;
if (view.Blob && view.URL) {
try {
new Blob;
return;
} catch (e) {}
}
// Internally we use a BlobBuilder implementation to base Blob off of
// in order to support older browsers that only have BlobBuilder
var BlobBuilder = view.BlobBuilder || view.WebKitBlobBuilder || view.MozBlobBuilder || (function(view) {
var get_class = function(object) {
returnObject.prototype.toString.call(object).match(/^\[object\s(.*)\]$/)[1]; }, FakeBlobBuilder =function BlobBuilder() { this.data = []; }, FakeBlob =function Blob(data, type, encoding) {
this.data = data;
this.size = data.length;
this.type = type; this.encoding = encoding; }, FBB_proto = FakeBlobBuilder.prototype, FB_proto = FakeBlob.prototype, FileReaderSync = view.FileReaderSync, FileException =function(type) {
this.code = this[this.name = type]; }, file_ex_codes = ("NOT_FOUND_ERR SECURITY_ERR ABORT_ERR NOT_READABLE_ERR ENCODING_ERR "+ "NO_MODIFICATION_ALLOWED_ERR INVALID_STATE_ERR SYNTAX_ERR" ).split(""),
file_ex_code = file_ex_codes.length,
real_URL = view.URL || view.webkitURL || view,
real_create_object_URL = real_URL.createObjectURL,
real_revoke_object_URL = real_URL.revokeObjectURL,
URL = real_URL,
btoa = view.btoa,
atob = view.atob,
ArrayBuffer = view.ArrayBuffer,
Uint8Array = view.Uint8Array;
FakeBlob.fake = FB_proto.fake = true;
while(file_ex_code--) { FileException.prototype[file_ex_codes[file_ex_code]] = file_ex_code + 1; }if(! real_URL.createObjectURL) { URL = view.URL = {}; } URL.createObjectURL =function(blob) {
var type = blob.type, data_URI_header;
if (type === null) {
type = "application/octet-stream";
}
if (blob instanceof FakeBlob) {
data_URI_header = "data:" + type;
if (blob.encoding === "base64") {
return data_URI_header + "; base64," + blob.data;
} else if (blob.encoding === "URI") {
return data_URI_header + "," + decodeURIComponent(blob.data);
} if (btoa) {
return data_URI_header + "; base64," + btoa(blob.data);
} else {
return data_URI_header + ","+ encodeURIComponent(blob.data); }}else if (real_create_object_URL) {
returnreal_create_object_URL.call(real_URL, blob); }}; URL.revokeObjectURL =function(object_URL) {
if(object_URL.substring(0, 5) ! = ="data:"&& real_revoke_object_URL) { real_revoke_object_URL.call(real_URL, object_URL); }}; FBB_proto.append =function(data/*, endings*/) {
var bb = this.data;
// decode data to a binary string
if (Uint8Array && (data instanceof ArrayBuffer || data instanceof Uint8Array)) {
var str = "", buf = new Uint8Array(data), i = 0 , buf_len = buf.length;
for (; i < buf_len; i++) {
str += String.fromCharCode(buf[i]);
}
bb.push(str);
} else if (get_class(data) === "Blob" || get_class(data) === "File") {
if (FileReaderSync) {
var fr = new FileReaderSync;
bb.push(fr.readAsBinaryString(data));
} else {
// async FileReader won't work as BlobBuilder is sync throw new FileException("NOT_READABLE_ERR"); } } else if (data instanceof FakeBlob) { if (data.encoding === "base64" && atob) { bb.push(atob(data.data)); } else if (data.encoding === "URI") { bb.push(decodeURIComponent(data.data)); } else if (data.encoding === "raw") { bb.push(data.data); } } else { if (typeof data ! == "string") { data += ""; // convert unsupported types to strings } // decode UTF-16 to binary string bb.push(unescape(encodeURIComponent(data))); }}; FBB_proto.getBlob = function(type) { if (! arguments.length) { type = null; } return new FakeBlob(this.data.join(""), type, "raw"); }; FBB_proto.toString = function() { return "[object BlobBuilder]"; }; FB_proto.slice = function(start, end, type) { var args = arguments.length; if (args < 3) { type = null; } return new FakeBlob( this.data.slice(start, args > 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));Copy the codeThe Export2Excel. Js code is as follows:
/* eslint-disable */
require('script-loader! file-saver');
require('script-loader! @/vendor/Blob'); // The actual Blob import address 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 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 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'});
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;
// console.log('th',th);
// console.log('jsonData',jsonData);
// console.log('defaultTitle',defaultTitle)
data.unshift(th);
var ws_name = "SheetJS"; var wb = new Workbook(), ws = sheet_from_array_of_arrays(data); /* Set the maximum width of each column of the worksheet */ const colWidth = data.map(row => row.map(val => {/* null/undefined*/)if (val == null) {
return {'wch': 10}; } /* check whether it is Chinese */else if (val.toString().charCodeAt(0) > 255) {
return {'wch': val.toString().length * 2};
} else {
return {'wch': val.toString().length}; }})) /* Starts with the first value */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'
saveAs(new Blob([s2ab(wbout)], {type: "application/octet-stream"}), title + ".xlsx")}Copy the codeThird, create the vendor folder in the SRC directory and import the blob. js and Export2Excel.
If created and imported as above, the import directory for Export2Excel files can be used directly.
Step 4: Use in VUE:
If your data is completely downloaded and doesn’t need to be processed, you can just look at the code and ignore the following.
If you need to extract some data from the array for file download, you can view the following content: blog.csdn.net/friend_ship…
Here is the code I use
Because mine is to get a single object array to generate Excel table, and the original blogger’s use is not quite the same
letRowXlsx = [] Rowxlsx. push(json.parse (row[j].data)let keys = []
letForEach (v=>{keys.push(v) value.push(rowXlsx[I][v])}) value = [] rowXlsx. ForEach (v=>{keys.push(v) value.push(rowXlsx[I][v])}) }) console.log(keys)// console.log(value)// import("@/vendor/Export2Excel").then(excel => {// Remember to import two js files const tHeader = keys; Const filterVal = keys; Const Content = rowXlsx; const content = rowXlsx; const data = this.formatJson(filterVal,content); excel.export_json_to_excel(tHeader,data,Date.parse(new Date())) })Copy the codeformatJson(filterVal,jsonData) {
return jsonData.map( v => filterVal.map(j=> v[j]))
}
Copy the codePlease feel free to discuss in the comments section. The nuggets will draw 100 nuggets in the comments section after the diggnation project. See the event article for details