vue+ElementUI的table组件如何实现导出excel文件?
第一步
安装elementui组件库
npm i element-ui -S
在vue-cli中main.js中引入
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI)
第二步
1.安装导出excel 依赖的插件
npm install -S file-saver xlsx
npm install -D script-loader
2.在src目录建js文件
Export2Excel.js
(个人习惯)src/excel/js文件
Export2Excel.js
require('script-loader!file-saver');
require('script-loader!xlsx/dist/xlsx.core.min');
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_json_to_excel(th, jsonData, defaultTitle,title) {
//参数解析: th为表头 jsonData 为表数据 defaultTitle为文件夹的名称 title 为excel 的标题
var data = jsonData;
data.unshift(th);
var ws_name = title;
var wb = new Workbook(), ws = sheet_from_array_of_arrays(data);
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")
}
(个人习惯方法封装到src/util/util.js)
util.js 文件
const { export_json_to_excel } = require('../excel/Export2Excel');
export function exportExcel(columns,list){
//columns el-table 表头的数据
//list 表格详细数据
require.ensure([], () => {
let tHeader = []
let filterVal = []
console.log(columns)
if(!columns){
return;
}
columns.forEach(item =>{
tHeader.push(item.label)
filterVal.push(item.prop)
})
const data = list.map(v => filterVal.map(j => v[j]))
console.log(data)
export_json_to_excel(tHeader, data, '数据列表',"计量信息");
})
}
vue组件中调用
<template>
<div>
<el-button @click="daochu">导出</el-button>
<el-table
:data="tableData"
border
style="width: 100%">
<el-table-column v-for="(item,index) of columns" :key="index"
:prop="item.prop"
:label="item.label"
>
</el-table-column>
</el-table>
</div>
</template>
<script>
import { exportExcel } from '../util/util'
export default {
name: 'Home',
components: {
},
data() {
return {
columns:[{prop:'date',label:'日期',key:1},{prop:'name',label:'姓名',key:2},{prop:'address',label:'地址',key:3}],
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}]
}
},
methods:{
daochu(){
this.$nextTick(function () {
exportExcel(this.columns,this.tableData)
})
},
}
}
</script>