vue 导出多个sheet表的excel文件

最新推荐文章于 2024-11-19 17:33:40 发布

转载最新推荐文章于 2024-11-19 17:33:40 发布 · 3.2k 阅读

6 ·

CC 4.0 BY-SA版权

原文链接：https://www.cnblogs.com/hill-foryou/p/9230182.html

本文介绍了一种将JSON数据转换并导出到Excel的方法，包括定义数据结构、设置列宽、创建工作表及保存文件的过程。通过示例展示了如何使用XLSX库将不同类型的JSON数据分别导出到多个工作表中。

<el-button @click="_export" style="float:right">导出</el-button>

2. methods里的方法

_export() {

//需要导出的JSON数据

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 = this.transferData(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-10-14', data5: '2019-11-14'},

{extra: '文峰街道', data0: '成', data1: '科长', data2: '025-88888888', data3: '13000000000', data4: '2019-11-14', data5: ''},

];

},