vue导出excel---XLSX库
基础使用
1、将需要转出的二维数组转为工作表对象
//data:二维数组
//XLSX.utils.aoa_to_sheet:xlsx库的转换方法
let ws = XLSX.utils.aoa_to_sheet(data);
2、设置工作表中单元格的列宽
let wscols = [];
for (let i = 0; i < 9; i++){ //添加9列的列宽
wscols.push({ wch: 20 }) //wch 属性设置列宽为20
}
//ws['!cols'],用于设置工作表的列属性。
//!cols:是工作表中用于存储列信息的属性键。
ws['!cols'] = wscols; //设置列宽为20
3、创建空白工作簿
//XLSX.utils.book_new():xlsx库生成Excel工作簿对象的方法
let wb = XLSX.utils.book_new();
4、将工作表添加到工作簿中,并指定工作表名称
//XLSX.utils.book_append_sheet():xlsx库的方法,用于将工作表 ws 添加到工作簿 wb 中,并指定工作表的名称为“Sheet1”
XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
5、将工作簿导出为excel文件
//XLSX.writeFile():xlsx库将工作簿导出为excel文件的方法
XLSX.writeFile(wb, '巡检结果.xlsx'); //wb:工作簿;后面的为工作簿的名称
6、整体代码:
//调用该方法即可导出excel
exportExcel(){
let ws = XLSX.utils.aoa_to_sheet(data); //将data数组转换为工作表ws
let wscols = [];
for (let i = 0; i < 9; i++){ //创建一个包含9列的工作表列宽配置wscols,每列宽度设为20
wscols.push({ wch: 20 })
}
ws['!cols'] = wscols; //将列宽配置应用到工作表ws
let wb = XLSX.utils.book_new(); //创建一个新的工作簿wb
XLSX.utils.book_append_sheet(wb, ws, 'Sheet1'); //将工作表ws添加到工作簿wb中,命名为“Sheet1”
XLSX.writeFile(wb, '巡检结果.xlsx'); //将工作簿wb导出为名为“巡检结果.xlsx”的Excel文件
},
进阶使用
//调用该方法即可导出excel
//async:用于声明一个异步函数
async exportExcel(){
//await:和async一起使用,用于等待该方法完全结束后在执行后面语句
let tableDataAll = await this.getInspectListAll(); //通过其他方法获取到的需要导出的数据
if (tableDataAll.length > 65535){ //导出数据不能超过65535条
window.alert('导出数据超过65535条!请减少导出数据!')
return
}
//concaat:合并数组
//headers数组与transformData()返回数组合并
//headers数组在前,这里用来当 表头
this.dataWithHeaders = [this.headers].concat(this.transformData(tableDataAll)); //调用this.transformData(tableDataAll)
//遍历this.dataWithHeaders的对象
//Object.values(item):从对象item中提取所有可枚举属性的值,并返回一个数组
//slice(0, -1):从数组中去除最后一个元素
//const data = this.dataWithHeaders.map(item => Object.values(item).slice(0, -1));
const data = this.dataWithHeaders.map(item => Object.values(item)); //得到data数组,这是需要导出的所有数据
let ws = XLSX.utils.aoa_to_sheet(data); //将data数组转换为工作表ws
let wscols = [];
for (let i = 0; i < 9; i++){ //创建一个包含9列的工作表列宽配置wscols,每列宽度设为20
wscols.push({ wch: 20 })
}
ws['!cols'] = wscols; //将列宽配置应用到工作表ws
let wb = XLSX.utils.book_new(); //创建一个新的工作簿wb
XLSX.utils.book_append_sheet(wb, ws, 'Sheet1'); //将工作表ws添加到工作簿wb中,命名为“Sheet1”
XLSX.writeFile(wb, '巡检结果.xlsx'); //将工作簿wb导出为名为“巡检结果.xlsx”的Excel文件
},
//excel导出前操作
//tableDataAll中的数据并不全部都导出,通过下面方法后,将需要的数据放在新的对象中
transformData(tableDataAll){
//使用箭头函数,item为传入参数,将item中的多个属性映射到新对象中
//transformData为函数
const transformData = (item) => ({
sourceName: item.sourceName,
sourceIp: item.sourceIp,
sourceClass: item.sourceClass,
sourceType: item.sourceType,
monitorName: item.monitorName,
limitValuePercent: item.limitValuePercent,
monitorValue: item.monitorValue,
monitorValues: item.monitorValues,
isWarnType: item.isWarnType,
monitorTime: item.monitorTime
});
//map方法:遍历 tableDataAll 数组中的每一个元素
//并对每个元素调用 transformData 函数,最终返回一个新的数组,其中每个元素都是经过 transformData 函数处理后的新对象
return tableDataAll.map(transformData);
},