注意:这里是纯前端的数据处理转excel,正常情况下是需要后端生成文件流后,我们再导出。
直接上代码:
vue:首先在 script标签 内先引入 XLSX
react:直接在当前页面的文件夹内引入 XLSX
import XLSX from 'xlsx'
请注意,在使用此方法之前,你需要在项目中安装XLSX库。你可以通过npm安装XLSX库,命令如下:
npm install xlsx --save
在 js里面定义这个方法:
// 导出excel
exportData() {
// 这里的this.dataExport表示要导出的数组数据(vue的写法)如果是react,只需把data赋值成要导出的数据的值就行。注意数据必须是数组类型
const data = this.dataExport
// 创建一个Excel文件对象
const workbook = XLSX.utils.book_new();
const worksheet = XLSX.utils.json_to_sheet(data);
console.log("workbook",workbook);
console.log("worksheet",worksheet);
// 将worksheet添加到workbook中
XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
// 将workbook转换为blob对象
const wbout = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
const blob = new Blob([wbout], { type: 'application/octet-stream' });
// 下载Excel文件
const fileName = '导出表格详情表.xlsx';
if ('download' in document.createElement('a')) {
const link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = fileName;
link.click();
URL.revokeObjectURL(link.href);
} else {
navigator.msSaveBlob(blob, fileName);
}
}
在点击事件里面执行这个方法就可以实现表格导出啦~
这是最基本的表格导出,有任何疑问可以在下方提出来噢!博主看到了都会回复的