从ajax响应中下载pdf文件

Question

我正在尝试让浏览器下载从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.当我尝试在最后两个浏览器中触发它时没有任何反应.

该脚本和标记被放置在iframe中,由于从CMS继承,但我不知道是否有任何影响的.

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

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

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

是的,我可以在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();