使用vue实现excel下载
使用 Vue 实现 Excel 下载
在 Vue 中实现 Excel 下载功能，通常需要借助第三方库如 xlsx 或 file-saver。以下是两种常见方法：
方法一：使用 xlsx 和 file-saver 库
安装依赖库：
npm install xlsx file-saver --save在 Vue 组件中引入库并实现下载：
import XLSX from 'xlsx';
import { saveAs } from 'file-saver';
export default {
methods: {
downloadExcel() {
// 示例数据
const data = [
['Name', 'Age', 'Country'],
['Alice', 25, 'USA'],
['Bob', 30, 'UK']
];
// 创建工作簿
const workbook = XLSX.utils.book_new();
const worksheet = XLSX.utils.aoa_to_sheet(data);
XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
// 生成 Excel 文件
const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
const blob = new Blob([excelBuffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
// 下载文件
saveAs(blob, 'example.xlsx');
}
}
};方法二：使用 axios 下载后端生成的 Excel 文件
如果 Excel 文件由后端生成，可以通过 axios 下载：
import axios from 'axios';
export default {
methods: {
downloadExcel() {
axios({
url: '/api/download-excel',
method: 'GET',
responseType: 'blob'
}).then(response => {
const url = window.URL.createObjectURL(new Blob([response.data]));
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', 'example.xlsx');
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
});
}
}
};方法三：使用纯前端生成 CSV 文件
对于简单需求，可以生成 CSV 文件：
export default {
methods: {
downloadCSV() {
const csvContent = 'Name,Age,Country\nAlice,25,USA\nBob,30,UK';
const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', 'example.csv');
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
}
};注意事项
- 确保后端接口返回正确的
Content-Type（如application/vnd.ms-excel）。 - 对于大数据量，建议使用后端生成 Excel 文件以避免前端性能问题。
- 浏览器兼容性：
Blob和URL.createObjectURL在现代浏览器中广泛支持。
