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

【问题标题】：Turning image response from server into downloadable file将来自服务器的图像响应转换为可下载文件
【发布时间】：2019-03-03 19:31:46
【问题描述】：

我正在对我的服务器进行 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

【问题讨论】：

添加显示您尝试链接答案的代码。
@zero298 添加了它
你可以使用我的下载工具，它会检测很多条件和环境以及输入格式（blob、url 等），以尽可能广泛地进行下载：github.com/rndme/download
“变成用户可下载的文件”是什么意思？比如添加按钮“下载”之类的？
我发现强制浏览器下载文件的最简单方法是将Content-Type更改为application/octet-stream。

标签： javascript html ajax nginx axios

【解决方案1】：

解决了！

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

一旦响应是 blob，我只需将 _response 传送到 URL.createObjectURL，然后我发布的其余代码就像一个魅力一样工作

【讨论】：