Javascript-将zip文件从服务器转发给用户下载

我在服务器上有以下代码：

const JSZip = require('jszip');

const zip = new JSZip();

// some logic to populate zip file

zip
  .generateNodeStream({ type: 'nodebuffer', streamFiles: true })
  .pipe(fs.createReadStream('out.zip').pipe(res))
  .on('finish', function () {
    logger.info('file was written out successfully');
    res.end();
  });

当我通过浏览器直接呼叫服务器时，我会得到一个文件供下载。 我想将其集成到UI中

我有一个简单的页面，只有一个按钮，点击它就可以调用这个方法

const baseURL = 'http://localhost:3000/download/'
const myFetch = (id) => {
  var element = document.createElement('a');
  element.setAttribute('href', baseURL + id);
  element.setAttribute('download', 'zip1.zip');

  element.style.display = 'none';
  document.body.appendChild(element);

  element.click();

  document.body.removeChild(element);
}

document.addEventListener('click', event => {
    event.preventDefault();
    if (event.target.matches('.ID1')) {
        myFetch(1);
    }
    else if (event.target.matches('.ID2')) {
        myFetch(2);
    }
    else if (event.target.matches('.ID3')) {
        myFetch(3);
    }
    return

}, false);

我在

then

块中尝试了几件事，但未能将zip文件转发到浏览器进行下载。 我觉得

then

块并没有真正等待从服务器传递文件

---

如何将文件传递到浏览器进行下载？

因此代码应如下所示：

const baseURL = 'http://localhost:3000/download/'
const myFetch = (id) => {
//  fetch(baseURL + id)
//  .then((response) =>{
      var element = document.createElement('a');
//      element.setAttribute('href', 'application/zip, application/octet-stream, application/x-zip-compressed, multipart/x-zip,' + response.body);
      element.setAttribute('href', baseURL + id);
      element.setAttribute('download', 'zip1.zip');

      element.style.display = 'none';
      document.body.appendChild(element);

      element.click();

      document.body.removeChild(element);
  //})
  //.catch((error) => {
  //  console.error(error);
  //})

  //return;
}

---

事实上，我不确定附加/删除（和样式）是否必要，我只在Chrome中测试了类似的代码（在没有它们的情况下它也能工作）。

为什么

fetch（）

？您应该只有

element.setAttribute（'href'，baseURL+id）

。您的另一个问题（）中没有建议的解决方案，已识别的副本建议

fetch（）

。我已更新了该问题，请再看一看。当您运行该代码时，开发工具的网络面板会显示什么？@kaido，没有。在此之前，我使用promise for

myFetch

，我确实看到了来自服务器的调用和响应，但我不知道如何将文件转发到浏览器进行下载当我通过浏览器直接呼叫服务器时，我确实得到了一个文件供下载-您使用的URL是什么？Firefox文档中曾经需要锚定，现在不再需要了。我已经更新了问题，请再看一看。我试过你的代码，但什么也没发生