从ajax响应下载pdf文件答案

【问题标题】：Download pdf file from ajax response从ajax响应下载pdf文件
【发布时间】：2016-11-26 05:34:00
【问题描述】：

我正在尝试让浏览器下载从 ajax 响应收到的 pdf 文件。

受Download pdf file using jquery ajax的启发，我模拟了这样的点击/下载事件：

    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 中，但我不确定这是否有任何影响。

知道如何针对所有现代浏览器优化它吗？

【问题讨论】：

你有什么错误吗？
检查 IE 中的控制台，如果它抛出任何错误，请告诉我们

标签： javascript jquery ajax pdf

【解决方案1】：

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

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 的版本，但效果不佳。将尝试继续调查它并为此提供解决方案。

【讨论】：

我选择了 gaetanoM 的回答，因为他是第一个，但后来我测试了你的脚本，它也能正常工作 - 谢谢（我投票赞成）
其实我是第一个 :( 23 小时前回答。
啊，s*** 对不起：/他先出来了，所以我认为他在你之前..你知道我是否可以为你增加额外的赏金吗？
您可以为每个问题添加赏金，并将其奖励给新的或现有的答案。 You can read more here.
酷，23 小时内等你赏金 :)

【解决方案2】：

知道如何针对所有现代浏览器优化它吗？

是的，我可以给你一个在 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();

【讨论】：

@AndiAR 我不知道。我从来没有使用过野生动物园。你能这么好心地测试一下并告诉我吗？非常感谢

【解决方案3】：

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

 $.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!');
        }
    });

【讨论】：