在vue中,帮忙写一个导出excel的通用方法,导出的excel格式是xlsx的
时间: 2024-09-30 22:02:01 浏览: 24
vue+element并使用xlsx实现导出excel
在Vue.js中创建一个通用的方法来导出Excel文件(xlsx格式),我们可以使用一个名为`js-xlsx`的库,它可以方便地操作Excel文件。首先确保你已经在项目中安装了这个依赖:
```bash
npm install js-xlsx --save
```
然后你可以创建一个如下的方法来生成xlsx文件并下载:
```javascript
import * as XLSX from 'js-xlsx';
export function exportToExcel(fileData, filename = 'output.xlsx') {
// 将数据转换为JSXLSX Sheet对象
const workbook = XLSX.utils.book_new();
const worksheet = XLSX.utils.aoa_to_sheet(fileData);
// 添加工作表到工作簿
XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
// 设置工作簿名称
XLSX.utils.book_set_name(workbook, filename);
// 将工作簿转换为Buffer
const buffer = XLSX.writeFile(workbook);
// 创建隐藏的下载链接,点击后下载文件
const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
const url = window.URL.createObjectURL(blob);
// 创建隐藏的a标签,触发点击事件下载文件
const aLink = document.createElement('a');
aLink.style.display = 'none';
aLink.href = url;
aLink.download = filename;
// 触发点击事件
aLink.click();
// 清理临时资源
window.URL.revokeObjectURL(url);
}
```
在这个方法中:
- `fileData` 是你需要导出的数据数组或对象数组,每一项代表一列,如果是对象,应有对应的key对应每个列名。
- `filename` 是你想要导出的文件名,默认为 'output.xlsx'。
调用这个方法时,传递你要导出的数据和文件名即可:
```javascript
const data = [
['Name', 'Age', 'Email'],
['John Doe', 30, 'john.doe@example.com'],
['Jane Smith', 25, 'jane.smith@example.com']
];
exportToExcel(data);
```
阅读全文