在浏览器内部渲染PDF

Question

我今天看了很多不同的SO帖子.

我有一个需要在浏览器中显示PDF文档的应用程序.此应用程序还需要在IE(11+)中运行.

事情就是这样:iframe一个src工作得很好.就像是:

<iframe src="www.myurl.com/thedocument"></iframe>

但是,www.myurl.com/thedocument现在受到oAuth的保护.这意味着我需要www.myurl.com/thedocument使用适当的授权标头凭据进行请求.

这意味着(我认为),我必须www.myurl.com/thedocument通过ajax 请求.ajax请求返回base64或包含文档的byte [].

IE不支持数据URI来呈现PDF,所以我不能只将我的ajax请求的响应转换为iframe.

所以..现在我被卡住了.

有任何想法吗？

谢谢

Answer 1

一种选择是使用PDF.js ，这是一个 JavaScript 库，用于将 PDF 渲染到支持 IE10+ 的HTML5 画布中。该库支持从 TypedArray（例如 Uint8Array）加载 PDF 数据，该数据可以根据 ajax 请求的结果生成。

我在这里准备了一个简短的示例，该示例显示存储在 Base64 编码的二进制文件中的单页 PDF。为了避免执行 base64 转换，还可以直接从 XMLHttpRequest 响应中检索 TypedArray：

function reqListener () {
    var byteArray = new Uint8Array(this.response);
    PDFJS.getDocument(byteArray).then(function(page) {
        // ....
    });
}

var req = new XMLHttpRequest();
req.addEventListener("load", reqListener);
req.responseType = "arraybuffer";
req.open("GET", "http://www.example.com/example.pdf");
req.send();

为了支持您在本机 pdf 查看器中期望的功能（打印等），该库包含一个示例查看器，您可以根据自己的目的进行调整。