我正在尝试使浏览器下载从ajax响应接收到的pdf文件。
受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();
不幸的是,这仅适用于Chrome,不适用于Firefox + IE。当我尝试在最后两个浏览器中触发它时,没有任何反应。
由于从CMS继承,脚本和标记被放置在iframe中,但是我不确定这是否有影响。
关于如何针对所有现代浏览器进行优化的想法?
是的,我可以为您提供在Windows 10上经过IE11,Firefox 47和Chrome 52测试的解决方案。目前,Microsoft Edge尚无任何功能。
开始时,您需要区分是使用IE还是其他两种浏览器。这是因为在IE11上您可以使用:
window.navigator.msSaveBlob(req.response, "PdfName-" + new Date().getTime() + ".pdf");
对于其他两个浏览器,您的代码可在Chrome上运行,但不能在Firefox上运行,因为您没有将元素附加到文档正文中。
因此,更正后的代码是:
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();