将 PDF 作为 BLOB 发送到客户端，但缺少浏览器支持

Question

我目前正在调用外部 API，以便将工资单发送给我（以二进制形式发送到我的节点服务器，因为我必须在节点端使用证书身份验证）

我已经设法弄清楚如何让我的客户通过将其作为二进制对象发送到 chrome 上下载它，然后使用 createObjectURL 加载它，但这不适用于任何 IE 版本。

我尝试了各种解决方案，但似乎无法获得我所追求的兼容性，我想知道是否有人能够就我在客户端确保 IE8 兼容性的选项提供建议 > 服务时PDF？

服务器当前正在像这样发送接收到的 PDF 数据

res.setHeader('Content-Type', 'application/pdf');
res.setHeader('Content-Disposition', 'attachment; filename=myPdf.pdf');
res.write(pay_pdf_data, 'binary');
res.end(); 

客户端上的当前方法在 chrome 上运行良好，但在 IE/旧版浏览器中不起作用

function httpGetAsync(theUrl, data, callback) {
    var request = new XMLHttpRequest();
    request.open("POST", theUrl, true); 
    request.responseType = "blob";
    request.onload = function (e) {
        if (this.status === 200) {
            // `blob` response
            console.log(this.response);
            // create `objectURL` of `this.response` : `.pdf` as `Blob`
            var file = window.URL.createObjectURL(this.response);
            var a = document.createElement("a");
            a.href = file;
            a.download = this.response.name || "detailPDF";
            document.body.appendChild(a);
            a.click();
            // remove `a` following `Save As` dialog, 
            // `window` regains `focus`
            window.onfocus = function () {                     
              document.body.removeChild(a)
            }
        };
    };
    request.setRequestHeader("Content-Type", "application/json");
    request.send(data);
}

谢谢！

Answer 1

IE 不支持锚标记上的download 属性：http://caniuse.com/#search=download。

对于 IE10/IE11，您可以使用 window.navigator.msSaveOrOpenBlob，但对于 IE8/IE9，您需要在页面上添加涉及不可见 iframe 的 hack：

<iframe name="seekritDownload" style="display:none"></iframe>

您也可以试试这个：

function httpGetAsync(theUrl, data, callback) {
  var request = new XMLHttpRequest();
  request.open("POST", theUrl, true); 
  // IE10/IE11 and other modern browsers
  if ('responseType' in request) {
    request.responseType = "blob";
    request.onload = function (e) {
      if (this.status === 200) {
        // `blob` response
        console.log(this.response);
        // IE10/IE11
        if ('msSaveOrOpenBlob' in window.navigator) {
          // Here I assume `this.response` is the blob
          window.navigator.msSaveOrOpenBlob(this.response, this.response.name || "detailPDF");
        }
        else {
          // create `objectURL` of `this.response` : `.pdf` as `Blob`
          var file = window.URL.createObjectURL(this.response);
          var a = document.createElement("a");
          a.href = file;
          a.download = this.response.name || "detailPDF";
          document.body.appendChild(a);
          a.click();
          // remove `a` following `Save As` dialog, 
          // `window` regains `focus`
          window.onfocus = function () {                     
            document.body.removeChild(a)
          }
        }
      }
    };
    request.setRequestHeader("Content-Type", "application/json");
    request.send(data);
  }
  else {
    // This should work for IE8/IE9
    window.open(theUrl, 'seekritDownload');
  }
}

参考见：https://msdn.microsoft.com/en-us/library/hh779016(v=vs.85).aspx

编辑：除了缺少download 属性外，IE8 还缺少XMLHttpRequest.responseType 和Blob 对象。我添加了一个带有 iframe 的 HUGE hack，应该可以工作。如果您愿意，可以改为使用 JavaScript 创建和附加 iframe 元素