vue2.0下 导出excel设置多个sheet页

vue2.0下 导出excel设置多个sheet页

记录一下vue2.0下 导出excel设置多个sheet页

首先安装依赖

npm install xlsx@0.17.0 --save 
npm install file-saver@2.0.5 --save

其次在要用的地方引入一下

import fileSaverfrom 'file-saver'
import XLSX from 'xlsx'

最后在页面使用

<template><div id="app"><el-button type="success" @click="onexcel">导出excel</el-button>
</template>
<script>
import fileSaverfrom 'file-saver'
import XLSX from 'xlsx'
export default {methods: {//需要导出的JSON数据onexcel() {const data = {'基本信息': this.baseData(),'历史信息 ': this.history1(),};let columnHeaders = {'基本信息': {'data0': '主管单位或镇街道','data1': '单位','data2': '分管领导','data3': '职务','data4': '固定电话','data5': '移动电话','data6': '任职时间',},'分管领导历史': {'extra': '主管单位或镇街道','data0': '单位','data1': '分管领导','data2': '职务','data3': '固定电话','data4': '移动电话','data5': '任职时间','data6': '离职时间'},}let wscols = [{ wch: 12 }, { wch: 12 }, { wch: 12 }, { wch: 12 }, { wch: 12 }, { wch: 12 }, { wch: 12 }, { wch: 12 }, { wch: 12 }, { wch: 12 }, { wch: 12 }, { wch: 12 }, { wch: 12 }, { wch: 12 }];//设置字段宽度let sheetNames = [];let sheetsList = {};const wb = XLSX.utils.book_new();for (let key in data) {sheetNames.push(key);let columnHeader = columnHeaders[key] // 此处是每个sheet的表头let temp = ansferData(data[key], columnHeader);sheetsList[key] = XLSX.utils.aoa_to_sheet(temp);sheetsList[key]["!cols"] = wscols;}wb["SheetNames"] = sheetNames;wb["Sheets"] = sheetsList;XLSX.writeFile(wb, "通讯录.xlsx");},transferData(data, columnHeader) {let content = [], header = [];for (let i in columnHeader) {header.push(columnHeader[i])}content.push(header);data.forEach((item, index) => {let arr = [];for (let i in columnHeader) {arr.push(item[i])}content.push(arr);});return content;},baseData() {return [{data0: '虹桥街道',data1: '大数据中心',data2: '吴',data3: '副主任',data4: '025-88888888',data5: '13000000000',data6: '2019-12-14',}, {data0: '崇川街道',data1: '大数据中心',data2: '成',data3: '科长',data4: '025-88888888',data5: '13000000000',data6: '2019-11-14',},];},history1() {return [{ extra: '虹桥街道', data0: '张', data1: '主任', data2: '025-88888888', data3: '13000000000', data4: '2019-11-14', data5: '2019-12-14' },{ extra: '虹桥街道', data0: '吴', data1: '副主任', data2: '025-88888888', data3: '13000000000', data4: '2019-12-14', data5: '' },{ extra: '虹桥街道', data0: '吴', data1: '副主任', data2: '025-88888888', data3: '13000000000', data4: '2019-12-14', data5: '' },{ extra: '文峰街道', data0: '王', data1: '主任', data2: '025-88888888', data3: '13000000000', data4: '2019-10-14', data5: '2019-11-14' },{ extra: '文峰街道', data0: '成', data1: '科长', data2: '025-88888888', data3: '13000000000', data4: '2019-11-14', data5: '' },];},},
}
</script>