vue 根据表格生成文件
时间: 2023-10-08 09:10:26 浏览: 108
可以使用 `xlsx` 和 `file-saver` 这两个库来实现。
首先,在你的 Vue 项目中安装这两个库:
```
npm install xlsx file-saver --save
```
然后,在组件中引入这两个库:
```javascript
import XLSX from 'xlsx';
import FileSaver from 'file-saver';
```
接着,定义一个方法,用于将表格数据导出为 Excel 文件:
```javascript
exportExcel() {
// 定义 Excel 文件名和表格数据
const fileName = 'data.xlsx';
const worksheet = XLSX.utils.json_to_sheet(this.tableData);
// 将表格数据存储到工作簿中
const workbook = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
// 将工作簿转换为二进制文件,并保存到本地
const wbout = XLSX.write(workbook, { bookType: 'xlsx', type: 'binary' });
function s2ab(s) {
const buf = new ArrayBuffer(s.length);
const view = new Uint8Array(buf);
for (let i = 0; i < s.length; i++) view[i] = s.charCodeAt(i) & 0xff;
return buf;
}
const blob = new Blob([s2ab(wbout)], { type: 'application/octet-stream' });
FileSaver.saveAs(blob, fileName);
}
```
最后,在你的模板中添加一个按钮,点击该按钮即可将表格数据导出为 Excel 文件:
```html
<template>
<div>
<table>
<!-- 表格内容 -->
</table>
<button @click="exportExcel">导出 Excel</button>
</div>
</template>
```
以上代码中,`tableData` 是你要导出的表格数据。你需要根据你的实际情况修改这个变量的值。
阅读全文