在带有打印按钮的浏览器中将字节数组显示为 PDF？答案

【问题标题】：Display byte array as PDF in browser with print button?在带有打印按钮的浏览器中将字节数组显示为 PDF？
【发布时间】：2017-04-24 21:18:09
【问题描述】：

我正在开发一个必须在浏览器上显示 PDF 的应用程序。我通过 webAPI 从第三方获取 PDF 字节数组。我发现显示 pdf 的方法之一如下。

var pdfAsDataUri = "data:application/pdf;base64,"+byteArray;
window.open(pdfAsDataUri);

我不喜欢这种方法，因为它在 URL 中显示 base64 编码格式，还有其他方法可以将字节数组转换为 PDF 并与打印对话框 (window.print()) 一起显示在 HTML 页面上。

【问题讨论】：

标签： javascript html json pdf

【解决方案1】：

在现代浏览器中，您可以使用 Blob 到 create an object URL 来代替 base64 URL（在不同的浏览器中有一些限制，例如长度限制）。

这是一个可以做到这一点的工作示例。此示例在 iframe 中显示 PDF，但您可以使用 objectURL 做任何您想做的事情，例如在新选项卡中打开它等等。

var xhr = new XMLHttpRequest();
xhr.responseType = 'arraybuffer';
xhr.onload = function() {

    // Create the Blob URL:
    var buffer = xhr.response;
    var blob = new Blob([buffer], {
        type: 'application/pdf'
    });
    var objectURL = URL.createObjectURL(blob);

    // Create an iframe to demonstrate it:
    var iframe = document.createElement('iframe');
    iframe.className = 'sample-iframe';
    iframe.src = objectURL;
    document.body.appendChild(iframe);
    console.log(objectURL);
};
xhr.open('GET', 'https://cors-anywhere.herokuapp.com/http://www.xmlpdf.com/manualfiles/hello-world.pdf', true);
xhr.send();

html, body {
  width: 100%;
  height: 100%;
}  
.sample-iframe {
  width: 90%;
  height: 90%;
}

当然，浏览器内置的PDF打印功能也可以。

【讨论】：

该代码 sn-p 不起作用，至少在 Chrome 上不起作用。它显示一个空白页。
此网址下也没有 pdf。
@Stephan 不幸的是，crossorigin.me 目前似乎无法满足请求。