引言
后台管理系统中，有时候会出现导出表格到本地的场景，查阅资料，进行封装
根据 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 () {
// 对应表格的 label
const tHeader = ['日期', '姓名', '地址', '测试'];
// 对应表格的 prop
const 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>
文章仅供参考，具体需求根据项目进行更改