Pdf.js: rendering a pdf file using a base64 file source instead of url

Question

I am trying to make a page from pdf using pdf.js

Usually using url I can do this:

PDFJS.getDocument("http://www.server.com/file.pdf").then(function getPdfHelloWorld(pdf) { // // Fetch the first page // pdf.getPage(1).then(function getPageHelloWorld(page) { var scale = 1.5; var viewport = page.getViewport(scale); // // Prepare canvas using PDF page dimensions // var canvas = document.getElementById('the-canvas'); var context = canvas.getContext('2d'); canvas.height = viewport.height; canvas.width = viewport.width; // // Render PDF page into canvas context // page.render({canvasContext: context, viewport: viewport}); }); }); 

But in this case, I have the file in base64, not the URL:

 data:application/pdf;base64,JVBERi0xLjUKJdDUxdgKNSAwIG9iaiA8PAovTGVuZ3RoIDE2NjUgICAgICAKL0ZpbHRlciAvRmxhdGVEZWNvZGUKPj4Kc3RyZWFtCnjarVhLc9s2... 

How can I do that?

Answer 1

from source code at http://mozilla.github.com/pdf.js/build/pdf.js

 /** * This is the main entry point for loading a PDF and interacting with it. * NOTE: If a URL is used to fetch the PDF data a standard XMLHttpRequest(XHR) * is used, which means it must follow the same origin rules that any XHR does * eg No cross domain requests without CORS. * * @param {string|TypedAray|object} source Can be an url to where a PDF is * located, a typed array (Uint8Array) already populated with data or * and parameter object with the following possible fields: * - url - The URL of the PDF. * - data - A typed array with PDF data. * - httpHeaders - Basic authentication headers. * - password - For decrypting password-protected PDFs. * * @return {Promise} A promise that is resolved with {PDFDocumentProxy} object. */ 

Thus, the standard XMLHttpRequest (XHR) is used to retrieve the document. The problem is that XMLHttpRequests do not support data: uris (for example, data: application / pdf; base64, JVBERi0xLjUK ...).

But it is possible to pass a typed Javascript array to a function. The only thing you need to do is convert the base64 string to Uint8Array. You can use this function at https://gist.github.com/1032746

 var BASE64_MARKER = ';base64,'; function convertDataURIToBinary(dataURI) { var base64Index = dataURI.indexOf(BASE64_MARKER) + BASE64_MARKER.length; var base64 = dataURI.substring(base64Index); var raw = window.atob(base64); var rawLength = raw.length; var array = new Uint8Array(new ArrayBuffer(rawLength)); for(var i = 0; i < rawLength; i++) { array[i] = raw.charCodeAt(i); } return array; } 

TL; DR

 var pdfAsDataUri = "data:application/pdf;base64,JVBERi0xLjUK..."; // shortened var pdfAsArray = convertDataURIToBinary(pdfAsDataUri); PDFJS.getDocument(pdfAsArray) 

Answer 2

The accepted answer is used to check IE and convert dataURI to UInt8Array; accepted form pdfjs

  Ext.isIE ? pdfAsDataUri = me.convertDataURIToBinary(pdfAsDataUri): ''; convertDataURIToBinary: function(dataURI) { var BASE64_MARKER = ';base64,', base64Index = dataURI.indexOf(BASE64_MARKER) + BASE64_MARKER.length, base64 = dataURI.substring(base64Index), raw = window.atob(base64), rawLength = raw.length, array = new Uint8Array(new ArrayBuffer(rawLength)); for (var i = 0; i < rawLength; i++) { array[i] = raw.charCodeAt(i); } return array; },