vue download-Excel
时间: 2023-08-01 14:06:03 浏览: 98
pikaz-excel-js:一个vue版本的excel导入导出插件
5星 · 资源好评率100%
要在 Vue 中实现下载 Excel 文件,可以使用第三方库 `xlsx` 和 `file-saver`。以下是一个基本的示例:
1. 安装依赖:
```bash
npm install xlsx file-saver --save
```
2. 创建一个方法来处理 Excel 下载:
```javascript
import XLSX from 'xlsx';
import FileSaver from 'file-saver';
export default {
methods: {
downloadExcel() {
// 生成 Excel 文件的数据
const data = [
['姓名', '年龄', '性别'],
['张三', 18, '男'],
['李四', 20, '女'],
['王五', 22, '男']
];
// 创建一个 workbook
const workbook = XLSX.utils.book_new();
// 添加一个 worksheet
const worksheet = XLSX.utils.aoa_to_sheet(data);
XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
// 将 workbook 转换为二进制对象
const wbout = XLSX.write(workbook, { bookType: 'xlsx', type: 'binary' });
// 保存文件
FileSaver.saveAs(new Blob([s2ab(wbout)], { type: 'application/octet-stream' }), 'example.xlsx');
}
}
};
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;
}
```
3. 在模板中添加一个按钮来触发下载:
```html
<template>
<div>
<button @click="downloadExcel">下载 Excel</button>
</div>
</template>
```
这样,当用户点击按钮时,就会触发 `downloadExcel` 方法来下载 Excel 文件。你可以根据需要修改 `data` 变量中的数据。
阅读全文