PDF.js: using postMessage to pass base64 to viewer.html in iframe

Viewed 563

I'm trying to create a mini-app (in Salesforce, though this may not be that relevant) that embeds the out-of-the-box viewer.html from PDF.js in an iframe. Users select a PDF from a list, and the app retrieves the base64 for that PDF and passes it into the viewer.

There are working examples out there that use a dated version of the pre-built PDF.js, including this one that uses version 1.5.188. What these working examples appear to do is:

  • Embed the viewer in an iframe and use postMessage to pass in a base64 to the viewer
  • In viewer.html, the following script has been added to receive and handle the message event:
<script>
  if (window.addEventListener) {
      // For standards-compliant web browsers
      window.addEventListener("message", handleMessage, false);
  } else {
      window.attachEvent("onmessage", handleMessage);
  }

  function handleMessage(evt){
    console.log('viewer.html entering handleMessage');
    var raw = atob(evt.data);
    var uint8Array = new Uint8Array(raw.length);
    for (var i = 0; i < raw.length; i++) {
      uint8Array[i] = raw.charCodeAt(i);
    }
    PDFViewerApplication.open(uint8Array);
  }
</script>

This works fine on the dated build, but when I add the above script to viewer.html in the latest build (2.5.207 as of this writing), nothing happens. PDFViewerApplication still exists in viewer.js, and still has an open function that takes a file as its first argument. But when I call this function, it doesn't display my PDF.

I know you can use the file parameter in the URL to make the viewer display a file based on its path. But I'm retrieving these files from a server-side REST API call, so I don't have a path, just a base64. Is there a surefire way of getting the latest version of the viewer to receive and display a base64?

1 Answers

This turned out to be a browser caching issue. Clearing the cache gave me the latest PDF.js library version, and I was able to view the PDF in the viewer.

Related