使用eligrey的文件管理器无法打开保存的图像

时间:2018-01-22 19:09:41

标签: reactjs filesaver.js

我正在使用import java.io.ByteArrayOutputStream; import java.io.DataOutputStream; import java.io.IOException; import javax.ws.rs.GET; import javax.ws.rs.Path; import javax.ws.rs.Produces; import javax.ws.rs.core.MediaType; import javax.ws.rs.core.Response; import com.hp.hpl.jena.query.QuerySolution; import com.hp.hpl.jena.query.ResultSet; import com.hp.hpl.jena.sparql.engine.http.QueryEngineHTTP; import com.hp.hpl.jena.query.ResultSetFormatter; @Path("/test") public class TestDataStreamResource { @GET @Produces(MediaType.APPLICATION_OCTET_STREAM) public Response Test() throws IOException { QueryEngineHTTP q = null; ResultSet results = null; ByteArrayOutputStream baos = new ByteArrayOutputStream(); String query = "SELECT * FROM<" + "http://localhost:8890/sparql/lubm" + "> WHERE {?s ?p ?o} LIMIT 10"; q = new QueryEngineHTTP("http://localhost:8890/sparql/", query); results = q.execSelect(); ResultSetFormatter.out(baos, results); return Response.ok(baos, MediaType.APPLICATION_OCTET_STREAM).build(); } } 来创建前端。

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

该操作将使用react来调用将返回文件的服务器。

axios.post就是这样的

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进行测试,将响应转换为正确的图像。

现在我将使用eligrey's filesaver来保存它。

这就是我所拥有的。

postman

使用 let fileName = getFileNameFromContentDisposition(response.headers); let blob = new Blob([response.data], {type: response.headers["content-type"]}); fileSaver.saveAs(blob, fileName, true); 测试代码。代码将创建一个Chrome文件,但无法打开。

我在GitHub和本网站上为解决类似问题提供了解决方案。但它都没有奏效。

我相信我错过了琐碎的设置来完成这项工作。

1 个答案:

答案 0 :(得分:0)

问题不在于图书馆。

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

即使blob string来自axios的回复转换回blob。它已损坏blob

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