1.先安装依赖xlsx和 file-saver
npm install --save xlsx file-saver
2.在需要的组件内引入
import FileSaver from “file-saver”;
import XLSX from “xlsx”
如果提示xlsx 引入不到， "export ‘default’ (imported as ‘XLSX’) was not found in ‘xlsx’
请使用：
import * as XLSX from ‘xlsx’
3，导出单个sheet的xlsx,完整代码
//导出表格
//按钮绑定此方法触发导出功能
exportTable(){
//要导出的xlsx命名，要导出表格的id
this.exportExcelFn('数据概览', '#table');
},
exportExcelFn(excelName,elementName) {
/* 从表生成工作簿对象 */
var wb = XLSX.utils.table_to_book(document.querySelector(`${
elementName}`));
/* 获取二进制字符串作为输出 */
var wbOut = XLSX.write(wb, {
bookType: 'xlsx',
bookSST: true,
type: 'array',
});
try {
FileSaver.saveAs(
//Blob 对象表示一个不可变、原始数据的类文件对象。
//Blob 表示的不一定是JavaScript原生格式的数据。
//File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
//返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
new Blob([wbOut], {
type: 'application/octet-stream' }),
//设置导出文件名称
`${
excelName}.xlsx`
);
} catch (e) {
if (typeof console !== 'undefined') console.log(e, wbOut);
}
return wbOut;
}
4，导出多个sheet 的单个xlsx主要代码
//导出所有表格多个sheet合并到一个excel
exportInfos(){
var xlsxParam = {
raw: true
}; //转换成excel时，使用原始的格式，这样导出的时候数字过长不会变成科学计数法
let workbook = XLSX.utils.book_new();
//sheet1
let data1 = this.getErWeiData(this.fieldList,this.dataList)
let ws1 = XLSX.utils.aoa_to_sheet(data1);
XLSX.utils.book_append_sheet(workbook, ws1, '第一个sheet');
// 这里可以添加多个sheet页
//sheet2
let ws2 = XLSX.utils.table_to_sheet(document.querySelector('#cbzbTable'), xlsxParam);
XLSX.utils.book_append_sheet(workbook, ws2, '第二个sheet');
//成本统计说明
let data3 = this.getErWeiData(this.fieldListCbtjsm,this.cbtjsmDataList)
let ws3 = XLSX.utils.aoa_to_sheet(data3);
XLSX.utils.book_append_sheet(workbook, ws3, '第三个sheet');
let wbout = XLSX.write(workbook, {
bookType: 'xlsx',
bookSST: true,
type: 'array'
});
try {
FileSaver.saveAs(
new Blob([wbout], {
type: 'application/octet-stream;charset=utf-8"'
}), '投标项目配置总表.xlsx');
} catch (e) {
if (typeof console !== 'undefined') console.log(e, wbout);
}
return wbout;
},
formatJson(filterVal, jsonData) {
return jsonData.map(v => filterVal.map(j => v[j]))
},
//返回表格需要的二维数组
getErWeiData(fieldList,dataList){
let tHeader = []//生成Excel表格的头部标题栏
let filterVal = []//生成Excel表格的内容栏（根据自己的数据内容属性填写）
for (var i in fieldList) {
tHeader.push(fieldList[i].label)
filterVal.push(fieldList[i].prop)
}
const list = dataList;//需要导出Excel的数据
const data = this.formatJson(filterVal, list);
data.unshift(tHeader); //可向数组的开头添加一个或更多元素，并返回新的长度。
return data;
},
// 导出操作---------end---------
5，知识点补充
1，使用如下方式导出时，由于js-xlsx提供了自动加工功能，会识别数据格式，然后进行加工。
XLSX.utils.table_to_book(document.getElementById('dataTable')),
但是导出的Excel数据和table显示数据不完全一致。添加如下参数保证数据一致
XLSX.utils.table_to_book(document.getElementById('dataTable'),{
raw:true}),
raw：表示导出数据是否是未加工的。