使用ant design vue导出excel
时间: 2023-09-09 18:07:22 浏览: 107
好的,您可以参考以下步骤进行操作:
1. 安装 ant-design-vue 和 xlsx 插件:
```
npm install ant-design-vue xlsx --save
```
2. 在需要导出 excel 的组件中,引入相关包,并定义导出方法:
```html
<template>
<a-button @click="exportExcel">导出 Excel</a-button>
</template>
<script>
import XLSX from 'xlsx';
import { saveAs } from 'file-saver';
export default {
methods: {
exportExcel() {
// 生成数据
const data = [
[ '姓名', '年龄', '性别' ],
[ '张三', 18, '男' ],
[ '李四', 20, '女' ],
[ '王五', 25, '男' ]
];
// 创建 workbook
const workbook = XLSX.utils.book_new();
// 添加 worksheet
const worksheet = XLSX.utils.aoa_to_sheet(data);
XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
// 导出 excel
const wbout = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
const blob = new Blob([wbout], { type: 'application/octet-stream' });
saveAs(blob, 'example.xlsx');
}
}
}
</script>
```
3. 点击导出按钮即可生成并下载 excel 文件。
希望能帮到您,如有其他问题欢迎继续询问。
阅读全文