在vue2中,请帮我写一个下载的方法,传入的参数:文件名称,导出的数据,导出的列头集合,排除的字段集合,下载后的文件格式为xlsx的excel档
时间: 2024-09-30 20:09:32 浏览: 17
vue实现导出Excel的两个js文件-Blob+Export2Excel
在 Vue.js 中创建一个文件下载功能,我们可以使用 `file-saver` 和 `xlsx` 这两个库。首先确保你已经安装了这两个依赖,如果没有,可以通过npm或yarn安装:
```bash
npm install file-saver xlsx
// 或者
yarn add file-saver xlsx
```
然后你可以编写如下的组件方法,用于生成并下载Excel文件:
```javascript
<template>
<!-- ... -->
</template>
<script>
import { saveAs } from 'file-saver';
import XLSX from 'xlsx';
export default {
methods: {
downloadFile(fileName, data, columnTitles, excludedFields, format) {
// 检查参数是否齐全
if (!fileName || !data || !columnTitles.length || !excludedFields.length || format !== 'xlsx') {
console.error('Invalid parameters for downloading the file.');
return;
}
// 创建一个新的工作簿
const workbook = XLSX.utils.book_new();
// 添加工作表
const worksheet = XLSX.utils.json_to_sheet(data);
// 设置表头(排除指定的字段)
const headerRow = columnTitles.filter(title => !excludedFields.includes(title));
XLSX.utils.sheet_add_aoa(workbook, [headerRow], { origin: -1 });
// 将工作表添加到工作簿中
const wsName = fileName.split('.')[0]; // 如果文件名有后缀,只取前面的部分作为工作表名
XLSX.utils.book_append_sheet(workbook, worksheet, wsName);
// 保存到Blob
const blob = XLSX.writeFile(workbook, fileName);
// 使用浏览器内置功能下载文件
saveAs(blob, fileName);
}
},
};
</script>
```
这个方法首先检查传入的参数,然后使用 `json_to_sheet` 方法将数据转换为表格,根据列头集合设置第一行(排除指定字段),然后将工作表添加到工作簿中。最后,通过 `XLSX.writeFile` 将工作簿转换为Blob,并调用 `saveAs` 下载。
阅读全文