axios 下载excel打不开

使用axios下载excel文件后无法打开的解决方法

1. 理解问题

在使用axios进行文件下载时，有时候会遇到下载的excel文件无法直接打开的问题。这通常是因为axios默认将响应的数据解析为JSON格式，而excel文件是二进制文件，因此需要对数据进行特殊处理才能正确下载并打开。

2. 解决方法流程

下面是解决问题的流程，通过以下步骤你将能够正确下载并打开excel文件。

3. 代码实现

步骤1：发送下载请求

首先，我们需要使用axios发送一个下载excel文件的请求。假设我们的下载链接为/api/download/excel，可以使用以下代码发送请求：

axios.get('/api/download/excel', { responseType: 'arraybuffer' })
  .then(response => {
    // 处理响应数据
  })
  .catch(error => {
    // 处理错误
  });

在上面的代码中，我们通过设置responseType为arraybuffer来告诉axios我们希望将响应数据以二进制数组的形式返回。

步骤2：处理响应数据

接着，我们需要对响应数据进行特殊处理，以便正确下载并打开excel文件。我们可以使用file-saver库来辅助处理文件下载。首先，安装file-saver：

npm install file-saver

然后，在代码中引入并使用file-saver：

import { saveAs } from 'file-saver';

axios.get('/api/download/excel', { responseType: 'arraybuffer' })
  .then(response => {
    // 处理响应数据
    const blob = new Blob([response.data], { type: 'application/vnd.ms-excel' });
    saveAs(blob, 'filename.xlsx');
  })
  .catch(error => {
    // 处理错误
  });

在上面的代码中，我们首先引入了saveAs函数，并在响应数据处理的部分创建了一个Blob对象。Blob对象是二进制大对象的容器，我们可以使用它来保存文件数据。然后，我们调用saveAs函数将Blob对象保存为一个名为filename.xlsx的excel文件。

步骤3：创建Blob对象

在上面的代码中，我们已经创建了Blob对象，但是为了更好地理解，下面是创建Blob对象的代码和注释解释了每一行的作用：

const blob = new Blob([response.data], { type: 'application/vnd.ms-excel' });

在这段代码中，我们使用new Blob()来创建一个Blob对象。Blob构造函数的第一个参数是一个数组，其中包含文件的二进制数据。在我们的情况下，我们使用response.data作为文件的数据。第二个参数是一个配置对象，其中我们指定了文件的MIME类型为application/vnd.ms-excel，这是excel文件的标准MIME类型。

步骤4：创建下载链接

接下来，我们需要创建一个下载链接，让用户点击链接来触发文件下载。以下是创建下载链接的代码和注释：

const downloadLink = document.createElement('a');
downloadLink.href = URL.createObjectURL(blob);
downloadLink.download = 'filename.xlsx';

在这段代码中，我们首先使用document.createElement()来创建一个<a>元素，然后将它的href属性设置为URL.createObjectURL(blob)。URL.createObjectURL()函数会生成一个指向Blob对象的URL，这样点击链接时就会下载这个文件。最后，我们将download属性设置为filename.xlsx，这样浏览器会将文件保存为filename.xlsx。

步骤5：触发下载

最后，我们将下载链接添加到文档中，并模拟用户点击链接来触发下载。以下是触发下载的代码和注释：