小编典典

从ajax响应下载pdf文件

ajax

我正在尝试使浏览器下载从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中,但是我不确定这是否有影响。

关于如何针对所有现代浏览器进行优化的想法?


阅读 385

收藏
2020-07-26

共1个答案

小编典典

关于如何针对所有现代浏览器进行优化的想法?

是的,我可以为您提供在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();
2020-07-26