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

by

from the sourcecode 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
 * e.g. 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.
 */

So a standard XMLHttpRequest(XHR) is used for retrieving the document.
The Problem with this is that XMLHttpRequests do not support data: uris (eg. data:application/pdf;base64,JVBERi0xLjUK…).

But there is the possibility of passing a typed Javascript Array to the function.
The only thing you need to do is to convert the base64 string to a Uint8Array. You can use this function found 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)

More Related Contents:

  1. Save base64 string as PDF at client side with JavaScript
  2. Pdf.js and viewer.js. Pass a stream or blob to the viewer
  3. Resize a Base-64 image in JavaScript without using canvas
  4. how to display base64 encoded pdf?
  5. How to display whole PDF (not only one page) with PDF.JS?
  6. Creating a BLOB from a Base64 string in JavaScript
  7. How can you encode a string to Base64 in JavaScript?
  8. how to draw smooth curve through N points using javascript HTML5 canvas?
  9. Use HTML5 to resize an image before upload
  10. Controlling fps with requestAnimationFrame?
  11. Generate PDF from HTML using pdfMake in Angularjs
  12. Get Base64 encode file-data from Input Form
  13. How can I perform flood fill with HTML Canvas?
  14. How to extract text from PDF in JavaSript
  15. How to save a base64 image to user’s disk using JavaScript?
  16. Using raw image data from ajax request for data URI
  17. JS – get image width and height from the base64 code
  18. Emulating palette based graphics in WebGL v.s. Canvas 2D
  19. Documentation for using JavaScript code inside a PDF file [closed]
  20. Convert base64 png data to javascript file objects
  21. How to draw polygons on an HTML5 canvas?
  22. how to compress a base64 image to custom size
  23. Image brightness detection in client side script
  24. Preventing Canvas Clear when Resizing Window
  25. How to draw a blurry circle on HTML5 canvas?
  26. Rasterizing an in-document SVG to Canvas
  27. How to add images as labels to Canvas Charts using chart.js
  28. Fit the background image to canvas size with Fabric js
  29. HTML5 Canvas API – formatting individual words with italics
  30. JavaScript runtime error: ‘$’ is undefined

Leave a Comment