vue3前端通过axios调后端接口下载excel文件

在Vue3前端，通过axios库调用后端接口下载Excel文件通常会涉及以下几个步骤：

1. 安装axios库：首先确保已经在项目中安装了axios，如果没有可以运行`npm install axios` 或者 `yarn add axios`。

2. 创建下载链接：后端需要提供一个HTTP响应，该响应应该包含一个名为"Content-Disposition"的头信息，用于指定文件名，并将内容设置为二进制Excel数据。例如，你可以使用`Content-Type: application/vnd.ms-excel`来指定Excel格式。

// 假设你的后端API路径是'/api/download-excel'
const downloadUrl = '/api/download-excel';

// 使用axios发起GET请求
axios.get(downloadUrl)
  .then(response => {
    // 检查响应状态码，一般200表示成功
    if (response.status === 200) {
      // 设置正确的Content-Disposition头信息和Content-Type
      const filename = 'example.xlsx'; // 文件名
      response.headers['Content-Disposition'] = `attachment; filename=${encodeURIComponent(filename)}`;

      // 创建Blob对象，并创建下载链接
      const blob = new Blob([response.data], {type: 'application/vnd.ms-excel'});
      const url = URL.createObjectURL(blob);
      
      // 创建隐藏的a标签并触发点击事件下载文件
      const link = document.createElement('a');
      link.href = url;
      link.download = filename;
      link.click();
      
      // 清理URL对象
      setTimeout(() => URL.revokeObjectURL(url), 0);
    } else {
      console.error('Failed to download Excel file.', response);
    }
  })
  .catch(error => {
    console.error('Error downloading Excel file:', error);
  });