vue 根据表格生成文件
时间: 2023-10-08 09:09:44 浏览: 90
你可以使用 `xlsx` 库来生成 Excel 文件,具体步如下:
1. 安装 `xlsx` 库:`npm install xlsx --save`
2. 在 Vue 组件中引入 `xlsx`:
```js
import XLSX from 'xlsx';
```
3. 在组件中定义生成 Excel 文件的方法:
```js
export default {
data () {
return {
tableData: [
// 表格数据
]
}
},
methods: {
generateExcel () {
const worksheet = XLSX.utils.json_to_sheet(this.tableData);
const workbook = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
XLSX.writeFile(workbook, 'table.xlsx');
}
}
}
```
4. 在组件中添加按钮,绑定生成 Excel 文件的方法:
```html
<template>
<div>
<el-button type="primary" @click="generateExcel">生成 Excel</el-button>
</div>
</template>
```
运行程序后,点击按钮即可生成名为 `table.xlsx` 的 Excel 文件。需要注意的是,`tableData` 数组中的数据必须是对象形式,且对象的 key 值即为 Excel 文件的表头。如果需要自定义表头,可以在生成表格时传入一个配置对象,具体用法可以参考 `xlsx` 库的文档。
阅读全文