当前位置 博文首页 > q1424966670的博客：vue导出Excel（三）
接上篇文章，需要用到Export2Excel、Blob等js文件????????提取码：s8ci
下面demo是把table的json数据导出为多个sheet的Excel，同时也是支持自定义列导出
?找到Export2Excel.js，把下面代码复制到最后即可
export function export_json_to_excel_in_sheet(jsonData, defaultTitle) {
var wb = new Workbook();
for(let i=0;i<jsonData.length;i++){
var ws_name = jsonData[i].sheetName;
var ws = sheet_from_array_of_arrays(jsonData[i].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")
}?下面是demo，复制即可运行
<template>
<div>
<el-button type="primary" @click="export2Excel()">导出Excel</el-button>
</div>
</template>
<script>
export default {
components: {},
data() {
return {
jsonData: [],
tableData: [
{ index: 0, username: "张三", password: 333, age: 22 },
{ index: 1, username: "李四", password: 444, age: 23 },
],
tableData2: [
{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 弄",},
],
tableData3: [
{key: '1',name: 'John Brown',age: 32,tel: '0571-22098909',phone: 18889898989,address: 'New York No. 1 Lake Park',},
{key: '2',name: 'Jim Green',tel: '0571-22098333',phone: 18889898888,age: 42,address: 'London No. 1 Lake Park',},
{key: '3',name: 'Joe Black',age: 32,tel: '0575-22098909',phone: 18900010002,address: 'Sidney No. 1 Lake Park',},
{key: '4',name: 'Jim Red',age: 18,tel: '0575-22098909',phone: 18900010002,address: 'London No. 2 Lake Park',},
{key: '5',name: 'Jake White',age: 18,tel: '0575-22098909',phone: 18900010002,address: 'Dublin No. 2 Lake Park',},
],
tableData4: [
{"id": "10001","username": "杜甫","email": "test@email.com","sex": "男","city": "浙江杭州","sign": "人生恰似一场修行","experience": "116","ip": "192.168.0.8","logins": "108","joinTime": "2016-10-14"},
{"id": "10002","username": "李白","email": "test@email.com","sex": "男","city": "浙江杭州","sign": "人生恰似一场修行","experience": "12","ip": "192.168.0.8","logins": "106","joinTime": "2016-10-14","LAY_CHECKED": true},
{"id": "10003","username": "王勃","email": "test@email.com","sex": "男","city": "浙江杭州","sign": "人生恰似一场修行","experience": "65","ip": "192.168.0.8","logins": "106","joinTime": "2016-10-14"},
{"id": "10004","username": "贤心","email": "test@email.com","sex": "男","city": "浙江杭州","sign": "人生恰似一场修行","experience": "666","ip": "192.168.0.8","logins": "106","joinTime": "2016-10-14"},
{"id": "10005","username": "贤心","email": "test@email.com","sex": "男","city": "浙江杭州","sign": "人生恰似一场修行","experience": "86","ip": "192.168.0.8","logins": "106","joinTime": "2016-10-14"},
{"id": "10006","username": "贤心","email": "test@email.com","sex": "男","city": "浙江杭州","sign": "人生恰似一场修行","experience": "12","ip": "192.168.0.8","logins": "106","joinTime": "2016-10-14"},
{"id": "10007","username": "贤心","email": "test@email.com","sex": "男","city": "浙江杭州","sign": "人生恰似一场修行","experience": "16","ip": "192.168.0.8","logins": "106","joinTime": "2016-10-14"},
{"id": "10008","username": "贤心","email": "test@email.com","sex": "男","city": "浙江杭州","sign": "人生恰似一场修行","experience": "106","ip": "192.168.0.8","logins": "106","joinTime": "2016-10-14"}
],
};
},
methods: {
export2Excel() {
this.jsonData = [];
require.ensure([], () => {
const {export_json_to_excel_in_sheet} = require("@/excel/Export2Excel");
this.assemblyData(["索引", "用户名", "密码"],["index", "username", "password"],this.tableData,"模拟数据");
this.assemblyData(["日期", "名称", "地址"],["date", "name", "address"],this.tableData2,"element数据");
this.assemblyData(["索引", "用户名", "年龄", "电话", "手机", "地址"],["key", "name", "age", "tel", "phone", "address"],this.tableData3,"antdDesign数据");
this.assemblyData(["索引", "用户名", "邮箱", "性别", "城市", "签名", "积分", "IP", "加入时间"],["id", "username", "email", "sex", "city", "sign", "experience", "ip", "joinTime"],this.tableData4,"layui数据");
export_json_to_excel_in_sheet(this.jsonData, "用户列表");
});
},
/**
* 加入一个sheet调用此方法一次
* fieldName 列名
* filterVal 每列对应key
* tableData 表格的json数组数据
* sheetName 当前sheet的名称
*/
assemblyData(fieldName,filterVal,tableData,sheetName){
let json = {sheetName};
let data = tableData.map((v) => filterVal.map((j) => v[j]));
data.unshift(fieldName);
json.data = data;
this.jsonData.push(json)
}
},
};
</script>
<style lang="scss" scoped>
</style>?
cs