如何使用Fetch API在javascript中下载具有多个块的单个文件

如何解决如何使用Fetch API在javascript中下载具有多个块的单个文件

我在我的应用程序中使用fetch API从URL下载文件。每个URL提供一个块作为响应。当文件只有一个块时，我可以使用response.blob()下载文件。但是，如果单个文件有多个块，则必须从n个不同的url中获取块，例如url1，url2，..等等。如何合并他们的响应以生成单个Blob并下载文件。

下面是仅下载一个文件块（从url-1获取）的代码。

let downloadUrl = `https://url-1`;
      fetch(downloadUrl,{
        method: 'GET'
      })
        .then(
          (res: any) => {
            if (res.ok && res.status === 200) {
              //File response loaded
            } else {
              return null;
            }
            return res.blob();
          },error => {
            // error in downloading
          }
        )
        .then(fileData => {
          if (fileData) {
            let url = window.URL.createObjectURL(fileData);
            let a = document.createElement('a');
            a.href = url;
            a.download = file.fileName;
            a.click();
          }
        });

我可以在访存API中发出多个请求，并使用Promise.all(responseArr)。但是如何将它们的响应合并为单个Blob响应？

解决方法

您可以使用fetch()获取各个块，然后使用.arrayBuffer()将每个响应作为数组缓冲区获取。

然后，您可以使用Blob(array,options)构造函数创建一个新的blob，该blob包含刚刚下载的所有阵列缓冲区。

示例：

//*[@id="ember1915"]/svg/g[2]/svg/text

,

我会遍历URL以按顺序下载块，并在下载时将它们组合起来

try{
    var urls = ['https://url-1','https://url-2.0','https://url-3.1415']
    var fullFile = new Blob();
    for (let x = 0; x < urls.length; x++){
        await fetch(urls[x]).then((res) => {
            if (!res.ok || res.status !== 200) {
                throw('Download failed');
            }
            return res.blob();
        }).then(data => fullFile = new Blob([fullFile,data]));
    }
    let url = window.URL.createObjectURL(fullFile);
    let a = document.createElement('a');
    a.href = url;
    a.download = file.fileName;
    a.click();
} 
catch(e){console.log(e)};