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

由于从CMS继承，脚本和标记被放置在iframe中，但是我不确定这是否有影响。

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

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