Decrypt PDF file on client side and view with pdf.js

Question

I'm working on a project that all pdf files are encrypted on Web Server.

With XMLHttpRequest I get content of the encrypted pdf file. Then with JavaScript tools I decrypt the file. After all assign the content of file to a javascript variable as decrypted_file. All this is done at client side.

Here is what i want to do;

pdf.js renders and views pdf file that is located on web server or the same directory base.

How could I handle pdf.js to get content from javascript variable not url as "http//yourdomain.com/first-test.pdf or file as "first-test.pdf"?

Any answers are welcome, thank you.

Answer 1

Assuming that you are using the viewer.html of PDF.js, opening a PDF file from data is as easy as calling PDFViewerApplication.open with the right parameters.

Example: Typed arrays (Uint8Array / ArrayBuffer / ..)

// in viewer.html
var data = new Uint8Array( /* ... data ... */ );
PDFViewerApplication.open(data);

Example: Blob / File objects

// in viewer.html
var data = new Blob([ '%PDF....'] , {type: 'application/pdf'});
var url = URL.createObjectURL(data);
PDFViewerApplication.open(url);

Example: data URL (if supported by browser)

var url = 'data:application/pdf;base64,....';
PDFViewerApplication.open(url);

Example: data URL (any browser)

This consists of two steps: Decoding the base64 data-URL, and then converting the binary string to an Uint8Array.

var url = 'data:application/pdf;base64,....';
var data = url.split(';base64,')[1];
// Decode base64
var binaryString = atob(data);
// Convert binary string to Uint8Array
data = new Uint8Array(binaryString.length);
for (var i = 0, ii = binaryString.length; i < ii; ++i) {
    data[i] = binaryString.charCodeAt(i);
}
PDFViewerApplication.open(data);

Example: Using PDF.js in a frame

<iframe src="viewer.html" id="pdfjsframe"></iframe>
<script>
var pdfjsframe = document.getElementById('pdfjsframe');
// At the very least, wait until the frame is ready, e.g via onload.
pdfjsframe.onload = function() {
    var data = ... data here or elsewhere ... ;
    pdfjsframe.contentWindow.PDFViewerApplication.open(data);
};
</script>