javascript - 将 PDF 作为 BLOB 发送给客户端，但缺乏浏览器支持

Question

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

我已经设法弄清楚如何让我的客户端在 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 不支持 anchor 标记上的 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 添加了一个巨大的 hack。如果您愿意，可以使用 JavaScript 创建并附加 iframe 元素