引言

后台管理系统中，有时候会出现导出表格到本地的场景，查阅资料，进行封装

根据 vue-element-admin 进行参考和更改

下载插件

npm i xlsx file-saver

导出表格的处理函数

/* eslint-disable */
import { saveAs } from 'file-saver';
import XLSX from 'xlsx';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 exportJsonToExcel({multiHeader = [],header,data,filename,merges = [],autoWidth = true,bookType = 'xlsx'
} = {}) {/* original data */filename = filename || 'excel-list';data = [...data];data.unshift(header);for (let i = multiHeader.length - 1; i > -1; i--) {data.unshift(multiHeader[i]);}var ws_name = 'SheetJS';var wb = new Workbook();var ws = sheet_from_array_of_arrays(data);if (merges.length > 0) {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};}}));/* 以第一行为初始值 */const 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: bookType,bookSST: false,type: 'binary'});saveAs(new Blob([s2ab(wbout)], {type: 'application/octet-stream'}), `${filename}.${bookType}`);
}

页面使用

<template><div><el-button type="primary" @click="exportData">导出el-button><el-table :data="tableData" style="width: 100%"><el-table-column prop="date" label="日期" width="180"> el-table-column><el-table-column prop="name" label="姓名" width="180"> el-table-column><el-table-column prop="address" label="地址"> el-table-column><el-table-column prop="ce.shi.aaa" label="测试"> el-table-column>el-table>div>
template><script>
import { exportJsonToExcel } from '@/utils/Export2Excel';
export default {data () {return {tableData: [{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄',ce: {shi: {aaa: '孤孤单单'}}},{date: '2016-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1517 弄',ce: {shi: {aaa: '啊啊啊啊'}}},{date: '2016-05-01',name: '王小虎',address: '上海市普陀区金沙江路 1519 弄',ce: {shi: {aaa: '通天塔'}}},{date: '2016-05-03',name: '王小虎',address: '上海市普陀区金沙江路 1516 弄',ce: {shi: {aaa: '轻轻巧巧'}}}]};},methods: {// 导出exportData () {// 对应表格的 labelconst tHeader = ['日期', '姓名', '地址', '测试'];// 对应表格的 propconst filterVal = ['date', 'name', 'address', 'ce.shi.aaa'];const data = this.formatJson(filterVal, this.tableData);// 可以根据项目需要传入 bookType （文件后缀名）exportJsonToExcel({header: tHeader,data,filename: 'ceshi'});},// 获取每个数据formatJson (filterVal, jsonData) {return jsonData.map((v) =>filterVal.map((j) => {// 此判断解决数据多层嵌套if (j.indexOf('.') > 0) {const arr = j.split('.');let resData = v;for (var i = 0; i < arr.length; i++) {resData = resData[arr[i]];}return resData;} else {return v[j];}}));}}
};
script><style lang="less" scoped>
style>

文章仅供参考，具体需求根据项目进行更改

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！