处理来自 api 调用的文件下载

Question

在反应中，我正在根据this post中提到的 John Culviner 的解决方案测试我的文件下载

axios.post('api/downloadMyFile', 
            data
           ).then((response) => {
            
             const url = window.URL.createObjectURL(new Blob([response.data])) 

             const a = document.createElement('a');

             a.href = url;
             a.download = "test.zip"  
             document.body.appendChild(a);
             a.click();
             window.URL.revokeObjectURL(url);


           
        }).catch((err) => {
            
        } 

所以文件test.zip 正在下载。但是当我在保存后尝试打开它时，我在 Windows 中收到 Compressed Zip 文件夹错误。

另外，我注意到我不需要在a.download = "test.zip" 行中指定文件的名称，因为 Web 服务正在从共享存储中获取文件并且它已经有了一个名称。 所以在这种情况下，我是否需要在 response 对象中也有文件名？ response.filename 之类的东西，这样我就可以在下面的行中使用它，而不是手动命名它：

a.download = response.filename

Answer 1

Axios 返回的response.data 是一个 JSON 字符串。因此，从该 JSON 创建 Blob 不会产生正确的对象。来自 Axios 文档：

// responseType 表示服务器将要发送的数据类型 回复
// 选项有：'arraybuffer'、'document'、'json'、 '文本'，'流'
// 仅限浏览器：'blob'
响应类型：'json'， // 默认

简单的解决方法是告诉 Axios 以Blob 的形式提供响应。然后URL.createObjectURL() 将生成一个指向正确格式文件的 URL。

axios.post('api/downloadMyFile', data, { responseType: 'blob' })
.then(blob=>{
  const url = window.URL.createObjectURL(blob.data); 
  const a = document.createElement('a');
  a.href = url;
  a.download = "download.zip"  
  document.body.appendChild(a);
  a.click();
  window.URL.revokeObjectURL(url);
})