vue ajax请求下载excel

Vue.js 中使用 AJAX 进行文件下载（包括 Excel 文件）通常涉及以下几个步骤：

1. **安装插件**：首先需要一个支持处理文件流的插件，如 Axios（一个基于 Promise 的 HTTP 库），配合 FileSaver.js 或 js-file-download 等用于浏览器本地保存文件的库。

npm install axios file-saver

2. **创建数据导出函数**：使用 Axios 发送 GET 请求到服务器端获取 Excel 数据。假设你有一个 API 接口 `exportExcel`，它返回一个包含 Excel 内容的数据流（如 CSV 或 Blob 对象）。

import axios from 'axios';
import saveAs from 'file-saver';

export function downloadExcel() {
  const url = '/api/exportExcel'; // 替换为实际的 API URL

  axios({
    method: 'get',
    url,
    responseType: 'blob'
  }).then((response) => {
    saveAs(response.data, 'report.xlsx'); // 将响应数据转换为可下载的文件
  })
    .catch((error) => {
      console.error('Error downloading Excel:', error);
    });
}

3. **触发下载**：当你需要让用户下载 Excel 时，可以调用 `downloadExcel` 函数。

4. **兼容性考虑**：为了确保在所有现代浏览器上都能正常工作，你可能需要添加一些条件判断，比如检查是否支持 `fetch` 或 `Blob`。如果浏览器不支持，可能需要提供一个备用的解决方案。