如何下载我从 HTTP 响应（axios PUT 请求）收到的 .zip 文件

Question

因此，API 的响应包含data应包含我需要的 .zip 文件的属性。它以我不明白的格式编写。

格式：

我尝试使用.blob()Stackoverflow 上类似问题中引用的内容，但它似乎不起作用。

理想的解决方案是：当客户端按下按钮时，应该提示他在本地下载所述 .zip 文件（来自 HTTP 响应的文件）。我使用的是 axios，请求类型是PUT.

到目前为止我的代码示例：

  const exportCards = () => {
    axios
      .put(url, {
        ids: ids,
      })
      .then((res) => {
        return res.data.blob();
      })
      .then((blob) => {
        var file = window.URL.createObjectURL(blob);
        window.location.assign(file);
      })
      .catch((e) => console.log(e));
  };

Answer 1

对于 zip 文件，我建议通过 axios 进行 fetch，因为有时 axios 请求中的响应不准确，您在下载时可能会遇到损坏的 zip 文件，最好的方法可能是使用名为 file-saver 和 fetch 的包。我发布这个答案只是为了帮助开发人员理解概念，代码是在 React 中测试的。

包文件保护程序：https://www.npmjs.com/package/file-saver

现在根据您在反应中的选择创建任何函数，我假设函数组件因此将根据函数组件语法编写方法。请注意，在使用 saveAs 功能之前，您需要从已安装的包 file-saver 中导入。

import { saveAs } from 'file-saver';

const downloadZipFileFromLaravel=()=>{
 fetch(`your url`)
           
                    .then(res => res.blob())
                    .then(blob => saveAs(blob, 'Auto Photos.zip')) // saveAs is a function from the file-saver package. 
              .catch((err) => {
                console.log(err.message);
              });
}

最后，您需要将函数与带有 onClick 的按钮连接起来。 例子

<button onClick={()=>downloadZipFileFromLaravel()}> </button>

注意：纯javascript中文件保护程序的使用，您可以查看： 如何使用filesaver.js

有关更多信息，您可以查看以下讨论：参考：https://github.com/eligrey/FileSaver.js/issues/156