Question

我试图让浏览器下载从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中，但我不确定它是否有任何影响a。

如何为所有现代浏览器优化它？

Answer 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版本，但它没有那么好用。将尝试继续调查并为此提供解决方案。

Answer 2

如何为所有现代浏览器优化它？

是的，我可以通过IE11，Firefox 47和Chrome 52在Windows 10上为您提供测试解决方案。目前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();

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

从ajax响应中下载pdf文件

3 个答案: