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
postMessageto 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?