vue框架使用xlsx导出excel表格修改文件名
时间: 2023-11-14 08:09:04 浏览: 298
详解如何在Vue项目中导出Excel
5星 · 资源好评率100%
可以使用FileSaver.js库来实现导出excel表格并修改文件名。具体步骤如下:
1. 安装FileSaver.js库
```
npm install file-saver --save
```
2. 安装xlsx库
```
npm install xlsx --save
```
3. 在需要导出excel表格的组件中引入FileSaver.js和xlsx库
```javascript
import XLSX from 'xlsx';
import FileSaver from 'file-saver';
```
4. 编写导出excel表格的方法
```javascript
exportExcel() {
// 生成excel表格数据
const data = [
['姓名', '年龄', '性别'],
['张三', 18, '男'],
['李四', 20, '女'],
['王五', 22, '男']
];
const ws = XLSX.utils.aoa_to_sheet(data);
const wb = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
// 导出excel表格并修改文件名
const fileName = '学生信息表.xlsx';
const wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'array' });
FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), fileName);
}
```
在上面的代码中,我们首先生成了一个包含学生信息的二维数组data,然后使用XLSX.utils.aoa_to_sheet方法将其转换为excel表格数据。接着,我们创建了一个新的工作簿wb,并将表格数据添加到工作簿中。最后,我们使用XLSX.write方法将工作簿wb转换为二进制数据,并使用FileSaver.saveAs方法将其保存为excel文件并修改文件名。
阅读全文