Javascript 从ajax响应下载pdf文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38524320/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Download pdf file from ajax response
提问by donpedroper
I'm trying to make the browser download a pdf file received from an ajax response.
我试图让浏览器下载从 ajax 响应中收到的 pdf 文件。
Inspired by Download pdf file using jquery ajaxI simulate a click/download event like this:
受使用 jquery ajax 下载 pdf 文件的启发，我模拟了这样的点击/下载事件：
var req = new XMLHttpRequest();
req.open("POST", "/servicepath/Method?ids=" + ids, true);
req.responseType = "blob";
req.onreadystatechange = function () {
if (req.readyState === 4 && req.status === 200) {
var blob = req.response;
var link = document.createElement('a');
link.href = window.URL.createObjectURL(blob);
link.download = "PdfName-" + new Date().getTime() + ".pdf";
link.click();
}
};
req.send();
Unfortunately this only works in Chrome, but not Firefox + IE. Nothing happens when I try to trigger it in the last two browsers.
不幸的是，这只适用于 Chrome，但不适用于 Firefox + IE。当我尝试在最后两个浏览器中触发它时没有任何反应。
The script and markup is placed inside an iframe due to inheritance from an CMS, but I'm not sure if that has any influence a.
由于从 CMS 继承，脚本和标记放置在 iframe 中，但我不确定这是否有任何影响。
Any idea on how to optimize it for all modern browsers?
关于如何为所有现代浏览器优化它的任何想法？
回答by Dekel
This version will work in all modern browsers:
此版本适用于所有现代浏览器：
var req = new XMLHttpRequest();
req.open("POST", "/servicepath/Method?ids=" + ids, true);
req.responseType = "blob";
req.onreadystatechange = function () {
if (req.readyState === 4 && req.status === 200) {
var filename = "PdfName-" + new Date().getTime() + ".pdf";
if (typeof window.chrome !== 'undefined') {
// Chrome version
var link = document.createElement('a');
link.href = window.URL.createObjectURL(req.response);
link.download = "PdfName-" + new Date().getTime() + ".pdf";
link.click();
} else if (typeof window.navigator.msSaveBlob !== 'undefined') {
// IE version
var blob = new Blob([req.response], { type: 'application/pdf' });
window.navigator.msSaveBlob(blob, filename);
} else {
// Firefox version
var file = new File([req.response], filename, { type: 'application/force-download' });
window.open(URL.createObjectURL(file));
}
}
};
req.send();
I was trying to get also a version for safari but it didn't work so well. Will try to keep investigate it and give a solution for that too.
我还试图获得一个 safari 版本，但效果不佳。将尝试继续调查它并为此提供解决方案。
回答by gaetanoM
Any idea on how to optimize it for all modern browsers?
关于如何为所有现代浏览器优化它的任何想法？
Yes, I can give you a solution tested on windows 10 with IE11, Firefox 47 and Chrome 52. Nothing for Microsoft Edge at the moment.
是的，我可以为您提供一个在 Windows 10 上使用 IE11、Firefox 47 和 Chrome 52 进行测试的解决方案。目前没有针对 Microsoft Edge 的解决方案。
At the beginning you need to distinguish if you are on IE or the other two browsers. This because on IE11 you can use:
一开始需要区分是IE浏览器还是其他两种浏览器。这是因为在 IE11 上您可以使用：
window.navigator.msSaveBlob(req.response, "PdfName-" + new Date().getTime() + ".pdf");
For the other two browsers your code works on Chrome but not on Firefox because you did not append the element to the document body.
对于其他两个浏览器，您的代码适用于 Chrome，但不适用于 Firefox，因为您没有将元素附加到文档正文。
So the corrected code is:
所以更正后的代码是：
var req = new XMLHttpRequest();
req.open("POST", "/servicepath/Method?ids=" + ids, true);
req.responseType = "blob";
req.onreadystatechange = function () {
if (req.readyState === 4 && req.status === 200) {
// test for IE
if (typeof window.navigator.msSaveBlob === 'function') {
window.navigator.msSaveBlob(req.response, "PdfName-" + new Date().getTime() + ".pdf");
} else {
var blob = req.response;
var link = document.createElement('a');
link.href = window.URL.createObjectURL(blob);
link.download = "PdfName-" + new Date().getTime() + ".pdf";
// append the link to the document body
document.body.appendChild(link);
link.click();
}
}
};
req.send();
