[英]Download and save file in browser's local storage
I have a Java web app that serves a file: 我有一个提供文件的Java Web应用程序:
@RequestMapping(value = "/pdf/download", method = RequestMethod.GET)
public void download(
HttpServletRequest request,
HttpServletResponse response,
@RequestParam(value = "id", required = true) Long id) throws IOException {
File pdfFile = pdfFileManager.getFromId(id);
response.setContentType("application/pdf");
response.addHeader("Content-Disposition", "attachment; filename=download");
response.setContentLength((int) pdfFile.length());
FileInputStream fileInputStream = null;
OutputStream responseOutputStream = null;
try {
fileInputStream = new FileInputStream(pdfFile);
responseOutputStream = response.getOutputStream();
int bytes;
while ((bytes = fileInputStream.read()) != -1) {
responseOutputStream.write(bytes);
}
responseOutputStream.flush();
} finally {
fileInputStream.close();
responseOutputStream.close();
}
}
I retrieve the file in the client and base64 encode it using FileReader
: 我在客户端检索文件,base64使用
FileReader
对其进行编码:
$.ajax({
url: "/pdf/download?id=" + id,
dataType: "application/pdf",
processData: false
}).always(function(response) {
if(response.status && response.status === 200) {
savePdf(response.responseText, "download_" + id);
}
});
function savePdf(pdf, key) {
var blob = new Blob([pdf], {type: "application/pdf"});
var fileReader = new FileReader();
fileReader.onload = function (evt) {
var result = evt.target.result;
try {
localStorage.setItem(key, result);
} catch (e) {
console.log("Storage failed: " + e);
}
};
fileReader.readAsDataURL(blob);
}
The problem is that the value saved in the local storage is not correct. 问题是本地存储中保存的值不正确。 The encoded data differs from the one i get when i upload the PDF using this snip .
编码数据与我使用此剪辑上传PDF时获得的数据不同。 I don't know if the problem is how i serve the file or the encoding process in the client.
我不知道问题是我如何在客户端中提供文件或编码过程。
The value stored is something like this 存储的值是这样的
data:application/pdf;base64,JVBERi0xLjQKJe+/ve+/ve+/ve+/vQoxIDAgb...
instead of 代替
data:application/pdf;base64,JVBERi0xLjQKJeHp69MKMSAwIG9iago8PC9Ue...
Solved the problem setting the request's response type to blob
: 解决了将请求的响应类型设置为
blob
:
var xhr = new XMLHttpRequest();
xhr.open("GET", "/pdf/download?id=" + id);
xhr.responseType = "blob";
xhr.onload = function() {
if(xhr.status && xhr.status === 200) {
savePdf(xhr.response, "download_" + id);
}
}
xhr.send();
function savePdf(pdf, key) {
var fileReader = new FileReader();
fileReader.onload = function (evt) {
var result = evt.target.result;
try {
localStorage.setItem(key, result);
} catch (e) {
console.log("Storage failed: " + e);
}
};
fileReader.readAsDataURL(pdf);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.