无法使用 eligrey 的文件保护程序打开保存的图像

Question

我正在使用 react 创建前端。

我有一个下载按钮，它会触发一个动作。

该操作将使用 axios.post 调用将 return 文件的服务器。

axios.response是这样的

resopnse.data: 'binary data of image file'
response.headers: {
  cache-control:"public, max-age=0"
  content-disposition:"attachment; filename="test.jpg""
  content-type:"image/jpeg"
  last-modified:"Mon, 22 Jan 2018 18:49:27 GMT"
}

response.data 使用 postman 进行测试，它将响应转换为正确的图像。

现在我要用eligrey's filesaver保存。

这就是我的。

    let fileName = getFileNameFromContentDisposition(response.headers);
    let blob = new Blob([response.data], {type: response.headers["content-type"]});
    fileSaver.saveAs(blob, fileName, true);

使用 Chrome 测试代码。该代码将创建一个 jpeg 文件，但无法打开。

我尝试了 GitHub 和本网站中针对类似问题提供的解决方案。但是 none 它正在工作。

我相信我缺少完成这项工作的琐碎设置。

Answer 1

问题不在图书馆。

axios 是原因。来自 axios 的响应已转换为 json。所以 binary data 丢失了一些信息。

即使 axios 的回复 blob string 被转换回 blob。这是一个损坏的 blob。

解决方法是使用 fetch，并将响应转换为 response.blob()。

无法使用 eligrey 的文件保护程序打开保存的图像

Saved image cannot be opened using eligrey's filesaver

reactjs

filesaver.js