使用打印按钮在浏览器中将字节数组显示为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,然后可以使用,而不是一个base64 URL(其在不同的浏览器有一些限制,比如长度的限制).

这是一个可行的例子.此示例在一个内部显示PDF iframe,但您可以随意执行任何操作,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内置打印功能也可以使用.