将来自服务器的图像响应转换为可下载文件

Question

我正在对服务器进行ajax POST调用，生成一个丑陋的远程下载URL，然后使用proxy_pass将其传递给nginx，然后将文件提供给客户端。 See here for process.图像似乎已经传到客户端，我只是无法下载。

如屏幕截图所示，chrome响应预览显示jpeg，标题看起来不错（内容处置附件）。

如何将该响应转换为用户可下载的文件？

我尝试过https://stackoverflow.com/a/23797348/5697126，但是下载的文件已损坏，实际图像大小为150％。这是我的尝试，它确实下载了一个文件，但是该文件因以下消息而损坏-解释JPEG图像文件时出错（不是JPEG文件：以0xef 0xbf开头）

const filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
  const matches       = filenameRegex.exec(_responseHeaders['content-disposition']);
  let fileName        = '';
  if (matches != null && matches[1])
  {
    fileName = matches[1].replace(/['"]/g, '');
  }

  let fileType = _responseHeaders['content-type'];
  let blob     = new Blob([_response], {type: fileType});

  let URL         = window.URL || window.webkitURL;
  let downloadUrl = URL.createObjectURL(blob);

  if (fileName)
  {
    // use HTML5 a[download] attribute to specify filename
    let a = document.createElement('a');
    // safari doesn't support this yet
    if (typeof a.download === 'undefined')
    {
      window.location = downloadUrl;
    }
    else
    {
      a.href     = downloadUrl;
      a.download = fileName;
      document.body.appendChild(a);
      a.click();
    }
  }
  else
  {
    window.location = downloadUrl;
  }

  setTimeout(function ()
  {
    URL.revokeObjectURL(downloadUrl);
  }, 100); // cleanup

Answer 1

解决了！

我必须将ajax（axios）响应类型设置为“ blob”，因为默认值为json。请参阅-https://github.com/axios/axios/issues/448

一旦响应是Blob，我就将_response通过管道传递给URL.createObjectURL，然后我发布的其余代码就像魅力一样