Rendering PDF files, i.e. inside the browser

Question

Today I looked at so many different SO posts.

I have an application that should show PDF documents inside a browser. This application also needs to be run in IE (11+).

Here's the thing: an iframe with src works just fine. Something like:

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

However, www.myurl.com/thedocument now protected by oAuth. This means that I need to request www.myurl.com/thedocument with the appropriate credentials for the authorization header.

This means (I think) that I should request www.myurl.com/thedocument via ajax. The ajax request returns base64 or byte [] containing the document.

IE does not support data URIs for rendering PDF files, so I cannot just track the response from my ajax request in an iframe.

So now I'm stuck.

Any ideas?

thanks

Answer 1

One option would be to use PDF.js , a javascript library for rendering PDF files to HTML5 canvas with IE10 + support . The library supports loading PDF data from TypedArray (for example, Uint8Array), which can be obtained from the result of an ajax request.

I have prepared a short example here , which displays a single-page PDF file stored in base64 encoded binary. To avoid doing a base64 conversion, TypedArray could also be obtained directly from the XMLHttpRequest response:

 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(); 

To support the features that you would expect in the built-in PDF viewer (printing, etc.), the library includes a sample view that you can adapt for your own purposes.