Question

在我的网页上，有一项功能可让用户下载zip文件。它的工作方式是在用户点击下载按钮后，GET请求将被发送到api，然后服务器将文件数据作为arraybuffer发回。然后，UI将数据转换为blob对象并将其另存为zip文件。以下是示例代码：

function download(){

    var req = {
      method: 'GET',
      url: "api/download",
      contentType: "application/zip",
      responseType: "arraybuffer",
      headers: {"Accept": "application/zip"}
    };

    $http(req).then(function (res) {
        if(res.status === 200){
           var file = new Blob([res.data], { type: "application/zip" });
           var link = document.createElement('a');
           link.href = URL.createObjectURL(file);
           link.download = "MyFile.zip";
           document.body.appendChild(link);
           link.click();
           document.body.removeChild(link);
        }
    }, function (err) {});

}

除了一个问题之外，代码效果很好：整个过程似乎需要很长时间才能完成。即使是只有100kb的zip文件，下载至少还需要2分钟。当我检查开发工具时，我注意到数据传输过程在将近3-5秒内完成，然后程序就像在那里停留另外2分钟，然后再继续下一步。（同时开发工具继续显示请求仍在继续）。看起来更奇怪的是我有一些不同大小的测试文件，比如从100KB到150MB，下载时间大致相同（不到5秒不同）。

有人可以详细说明可能的原因，我该如何改进？或者，如果有更好的方法通过不同的工作流程/模型实现目标？

提前谢谢！

Answer 1

问题似乎是您通过Blob临时将ZIP文件存储在客户端浏览器内存中，并将其存储两次（一次作为结果数据，曾经作为一个Blob）。如果您只是让服务器生成zip作为临时文件并向客户端发送指向该链接的链接，那么这看起来会更好一些。

为什么通过AJAX下载zip文件需要这么长时间？

1 个答案: