Pdf.js and viewer.js. Pass a stream or blob to the viewer

Question

I\'m having troubles in finding a solution for this: I retrieve a PDF blob from a SQL filestream field using Javascript in this way (it\'s a lightswitch project)

<         


        

Answer 1

If you've got an typed array (e.g. an Uint8Array), then the file can be opened using PDFView.open(typedarray, 0);.

If you've got a Blob or File object, then the data has to be converted to a typed array before you can view it:

var fr = new FileReader();
fr.onload = function() {
    var arraybuffer = this.result;
    var uint8array = new Uint8Array(arraybuffer);
    PDFView.open(uint8array, 0);
};   
fr.readAsArrayBuffer(blob);

Another method is to create a URL for the Blob/File object:

var url = URL.createObjectURL(blob);
PDFView.open(url, 0);

If the PDF Viewer is hosted at the same origin as your website that embeds the frame, then you can also view the PDF by passing the blob URL to the viewer:

var url = URL.createObjectURL(blob);
var viewerUrl = 'web/viewer.html?file=' + encodeURIComponent(url);
// TODO: Load the PDF.js viewer in a frame or new tab/window.