用打印按钮显示在浏览器中以PDF的形式显示字节数组

Question

我正在处理一个必须在浏览器上显示PDF的应用程序。我通过WebAPI从第三方获得PDF字节数组。我发现显示PDF的方式之一如下。

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

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

Answer 1

在现代浏览器中，您可以使用斑点创建一个对象URL，然后可以使用该对象URL代替base64 URL（在不同的浏览器中具有某些限制，例如长度限制）。/p>

这是一个可以做到这一点的工作示例。该示例在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://gist.githubusercontent.com/AlexanderOMara/4cd0ae77a3027a8363eecb5929b30ee3/raw/900734831709f3cb94718649ca8f7f9715adeb78/hello-world.pdf', true);
xhr.send();

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

当然，浏览器的PDF内置打印功能也将起作用。