Javascript 从ajax响应下载pdf文件

我试图让浏览器下载从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中，但我不确定这是否会对a产生任何影响

---

关于如何为所有现代浏览器优化它有什么想法吗？

此版本适用于所有现代浏览器：

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();

我还想为safari开发一个版本，但效果不太好。我会继续调查并给出解决方案

你知道如何为所有现代浏览器优化它吗

是的，我可以给你一个在Windows10上用IE11、Firefox47和Chrome52测试过的解决方案。目前，微软Edge没有任何问题

一开始你需要区分你是在IE上还是在其他两个浏览器上。这是因为在IE11上，您可以使用：

window.navigator.msSaveBlob(req.response, "PdfName-" + new Date().getTime() + ".pdf");

对于其他两种浏览器，您的代码可以在Chrome上运行，但不能在Firefox上运行，因为您没有将元素附加到文档体

因此，正确的代码是：

var-req=new-XMLHttpRequest（）；
请求打开（“POST”，“/servicepath/Method？ids=“+ids，true”）；
req.responseType=“blob”；
req.onreadystatechange=函数（）{
如果（req.readyState==4&&req.status==200）{
//IE测试
if（typeof window.navigator.msSaveBlob==='function'）{
window.navigator.msSaveBlob（req.response，“PdfName-”+新日期（）.getTime（）+“.pdf”）；
}否则{
var blob=请求响应；
var link=document.createElement（'a'）；
link.href=window.URL.createObjectURL（blob）；
link.download=“PdfName-”+新日期（）.getTime（）+”.pdf”；
//将链接附加到文档正文
document.body.appendChild（链接）；
link.click（）；
}
}
};
请求发送（）；

下载文件的非常简单的方法…

 $.ajax({
        url:"{{url('.......')}}/"+customerOrderId,
        type:'post',
        data:{"_token":"{{csrf_token()}}"},
        success:function(e){
            console.log(e.file);
            var link = document.createElement('a');
            link.href = e.file;
            link.download = "invoice_"+customerOrderId+"_" + new Date() + ".pdf";
            link.click();
            link.remove()

        },
        error:function(e){
            alert('Something went wrong!');
        }
    });

---

你有任何错误吗？检查IE中的控制台，让我们知道它是否抛出了任何错误我同意gaetanoM的答案，因为他是第一个，但我后来测试了你的脚本，效果也很好-谢谢（我投了赞成票）事实上我是第一个：（23小时前回答。啊，s***对不起：/他先出来了，所以我假设他在你之前。你知道我能不能为你增加一笔额外的奖金吗？你可以为每个问题增加一笔奖金，并奖励给新的或现有的答案。酷，奖金在23小时后等你：）@安迪，我不知道。我从来没用过狩猎。你能帮我测试一下，让我知道吗？非常感谢