华为建站wordpress,深圳网站设计首选刻,网站ftp密码怎么修改,爱站seo查询软件vue中前端导出excel方法
其实前端导出和后端导出的处理方式很类似 我们这样主要是根据后端接口返回的不分页的列表来进行整体导出功能的实现
依赖文件 可以直接cv到项目中
utils下的 Export2Excel.js文件
require(script-loader!file-saver);
require(script-loader!xlsx/d…vue中前端导出excel方法
其实前端导出和后端导出的处理方式很类似 我们这样主要是根据后端接口返回的不分页的列表来进行整体导出功能的实现
依赖文件 可以直接cv到项目中
utils下的 Export2Excel.js文件
require(script-loader!file-saver);
require(script-loader!xlsx/dist/xlsx.core.min);
const {blob} require(./Blob)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 rangesranges.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 ValueoutRow.push(cellValue ! ? cellValue : null);//Handle Colspanif (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);console.log(a)var oo generateArray(theTable);var ranges oo[1];/* original data */var data oo[0];var ws_name SheetJS;console.log(data);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)
}function formatJson(jsonData) {console.log(jsonData)
}
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);/* 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 || 列表saveAs(new Blob([s2ab(wbout)], {type: application/octet-stream}), title .xlsx)
}同级别的Blob.js文件 也可以直接cv到项目中都是依赖文件
const blob 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 BlobBuildervar BlobBuilder view.BlobBuilder || view.WebKitBlobBuilder || view.MozBlobBuilder || (function (view) {varget_class function (object) {return Object.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) {vartype 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) {return real_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 stringif (Uint8Array (data instanceof ArrayBuffer || data instanceof Uint8Array)) {varstr , 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 wont work as BlobBuilder is syncthrow 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 stringbb.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);};
}
exports.blob blob;然后自己创建个方法这里是老项目直接挂载到了vue原型链上 // 前端导出// 数据 表头 接口字段 文件名称Vue.prototype.getExcel function (res, head, file, fileName 表单数据) {require.ensure([], () {const {export_json_to_excel} require(./utils/Export2Excel.js)const tHeader headconst filterVal fileconst list resconst data list.map(v filterVal.map(j v[j]))export_json_to_excel(tHeader, data, fileName)})};在页面中如何使用 //导出async function exportEvent() {//element loading组件封装startLoading();let head, file, fileName;//这个为表头 基本和你展示的列表一摸一样head [市场属性, 市场名称, 全部订单, 全部退款, 部分退款, 合计退款订单, 退款率];//这个为列表对应的后端字段数据file [market_type, market_name, pay_num, refund_all_num, refund_part_num, refund_num, refund_rate];//这个为下载的列表名称fileName 退款分析导出列表;//接口搜索参数(可有可无) 我这里需要const params {...search.value,need_page: 0,start_date: search.value.date ? search.value.date[0] : ,end_date: search.value.date ? search.value.date[1] : ,};delete params.date;let data;try {const { data: resData } await getList(params);data resData;} catch (error) {throw new Error(导出失败);} finally {// 调用vue原型链上的getExcel方法 // vue3 直接可以引入function进传参调用proxy.getExcel(data.data.data, head, file, fileName);Message.success(导出成功);//element loading组件结束endLoading();}}第二种方法导出excel的方法 使用插件 file-saver 和 xlsx
我们需要先下载一个 xlsx 和 file-saver
npm install --save xlsx file-saver然后我们还是在uitls文件下创建一个 exportTbale.js 文件
//引入插件
import FileSaver from file-saver
import * as XLSX from xlsx
//写入方法
export const exportExcel2 async (id, name) {// 这里的outTable是需要导出的表格,选择对应idlet vb XLSX.utils.table_to_book(document.getElementById(id));let vbout XLSX.write(vb, { bookType: xlsx, bookSST: true, type: array });try {FileSaver.saveAs(new Blob([vbout], { type: application/octet-stream }), name .xlsx);} catch (e) {if (typeof console ! undefined) console.log(e, vbout);}return vbout;
}组件中使用 el-table:datatableDataclasstableidoutTable
el-table-column propsource label平台 aligncentertemplate slot-scopescopespan****/span/template/el-table-column
/el-tableimport { exportExcel2 } from /utils/exportTbale;// 导出
exportExcelTable () {setTimeout(() {//这里的前提是不分页的情况下 如果有单独不分页的接口 需要重新给 tableData 赋值然后再进行调用exportExcel2// ps: tableData.value res.data.data - (这里为不分页的接口数据)//不然会导致只有前面10条的数据//这里的第一个参数为el-table的id 第二个为excel的名称exportExcel2(outTable, **表)}, 500)
},希望此文章能帮助到您,一键三连 谢谢支持
