pdf.js open or generate pdf from Uint8Array

Question

I have the below base64 encoded string which contains the pdf file. I want to convert the base64 string to a Uint8Array as Uint8Array is supported from IE9 forward, and than I want to open pdf using pdf.js

I am using following code,

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(i = 0; i < rawLength; i++) {
        array[i] = raw.charCodeAt(i);
    }
    return array;
}

var pdfAsDataUri = "data:application/pdf;base64," + base64encodedString;
var pdfAsArray = convertDataURIToBinary(pdfAsDataUri);
PDFJS.getDocument(pdfAsArray)

base64encodedString = JVBERi0xLjQKJeLjz9MKMyAwIG9iago8PC9MZW5ndGggMTE1My9GaWx0ZXIvRmxhdGVEZWNvZGU+PnN0cmVhbQp4nI2XbW/bNhDH3/tT8NXQAavCJ1HigAF17SRI29hNrHR7y1lsp8CWXYne5m+/k2R5NcVTgiKok//97o6n4+n8ffI+mwhFkiQhWT6h5C1n/adEnT4w2n+Scf8nJZtP19nkYfK9/eHkAwi3ExrF5J9JmkaCJIoSRmWkCPis7GR1EpnmkW5VwUSUemqHSjGGgoqjXI2hoOIo1WMoqCiqNB9BGxVHk3gMBRVH43QMBRVHJRtDQcVRLsdQUHGUJmMoqCga67FuatRL9KFpbUYo/GNE07YfoX23k6ub5uQk+zp588WW+a4iC7O1v/6cPTf9/APEtGz71KemZE5WT1m2XJCfyGq5WA3RLp5Mw/Fmu9KZtcNDDsAPtiyP5JPZYqEEC4e63ppigwcaYM9NoHf1YW8rV4GLonSbaL1D4zIZjjvN88rWNR55AHJKfr9eZUSIRyhv9nh9nSFBlU489gaquauO4w9yiN1+WmZ3U3I/XTzdTGfZ0+Pd4pbMlvefscApRQK/9ESHpDHmXV7XI7VVSnjMXVnv7doVuxICbvemPOIBB/D7Q2XNgXyxVeFMjcWUym/2Q17AEfFAA+LfNeaca8/00e53lSOLw/ZPOxJiwOEhGMdrNjdupDsGJKNXTF9xymIkWKwHk6EpFsmOezzOEJrP3pKbojQb0uInEH2rxvDykyyNZHBIwvCVLEpB1BdDUtAIbhwqJyzSaSszHkcx93SuE/gflSUXEeWtrngEe4Mnp3GUdN45jbRPd4mzc2Y0lDgmnxJn/2dGA4ljcp84OydOQ4mzc+I08G7hiYpSBs/FH9rZzsFDfXBHrH/EuRVUC3xeksUu0DiCtzXwzVfuuLFhIhFtWcLE3Nbrqtg3d2KIcq2bivnk3O5N5ba2dENEQmmbKvrMbGPqwKCRadJWNZhcY+4bdtf/zUghmbp0pRVLtcQr6dvHPOXT2RSthm9fHjYbvA6vtD6dbphLrF6aAVLBniN0JGGbUhf9zsFpgutCJREf4TvvsTirccg7pvfeMb3zLtJx75jee8f0zjt/IXdM771jeuedvpA7pvfeh/pwTZXJaVeAecPblgj0ZQKNDPGS8xaVnl6osE/ALc1tHu5PJYbQdO0OJtChXTZxemn9VBauJqfXaigM1wzOPOA4pYGUBLwTk4Axlo0UoWzuzTPsnHP7FVIKJKR0pNSQ3cCCStxfpiQA/wZTG8/PR9H8eLBa90X5ivx81s8vMND6/HwUzY95B1k54w6BIc3BPA3Y38DXiVAaQec/GKOjTKjxC9voPEkjLUaujFDe+WftLXD1S9FhvpNtH6r5ZeNf2c4ipiryDXpKNAa9tegshinCrbic86fFmqyKbyU8g8oOyyqgMXgAbRZZ3Fp51v13FFi24SsZVMW44m87Fpdz3Z3sVXFZs4zGAPkHXJvcbo9k1ez4NTFlTpYHl+92VaDfGJOtE+Y5eYDJVLgjmdb1oTLl2pLM1q4ov5EZnMRWYU8wN2Fvv/TEUkrJAkZFDV8FHvNfyEcDfrM/SJJIqU9+/gN7fC5TCmVuZHN0cmVhbQplbmRvYmoKNSAwIG9iago8PC9QYXJlbnQgNCAwIFIvQ29udGVudHMgMyAwIFIvVHlwZS9QYWdlL1Jlc291cmNlczw8L1Byb2NTZXQgWy9QREYgL1RleHQgL0ltYWdlQiAvSW1hZ2VDIC9JbWFnZUldL0ZvbnQ8PC9GMSAxIDAgUi9GMiAyIDAgUj4+Pj4vTWVkaWFCb3hbMCAwIDU5NSA4NDJdPj4KZW5kb2JqCjEgMCBvYmoKPDwvQmFzZUZvbnQvVGltZXMtQm9sZC9UeXBlL0ZvbnQvRW5jb2RpbmcvV2luQW5zaUVuY29kaW5nL1N1YnR5cGUvVHlwZTE+PgplbmRvYmoKMiAwIG9iago8PC9CYXNlRm9udC9IZWx2ZXRpY2EvVHlwZS9Gb250L0VuY29kaW5nL1dpbkFuc2lFbmNvZGluZy9TdWJ0eXBlL1R5cGUxPj4KZW5kb2JqCjQgMCBvYmoKPDwvSVRYVCg1LjIuMSkvVHlwZS9QYWdlcy9Db3VudCAxL0tpZHNbNSAwIFJdPj4KZW5kb2JqCjYgMCBvYmoKPDwvVHlwZS9DYXRhbG9nL1BhZ2VzIDQgMCBSPj4KZW5kb2JqCjcgMCBvYmoKPDwvQ3JlYXRvcihDbGVhcnRyYWNrKS9Qcm9kdWNlcihpVGV4dK4gNS4yLjEgqTIwMDAtMjAxMiAxVDNYVCBCVkJBKS9UaXRsZShBY2FkZW15IE9yZGVyIEluc3BlY3Rpb24gUERGKS9Nb2REYXRlKEQ6MjAxNTEyMDMwOTI5NTItMDUnMDAnKS9BdXRob3IoQ2xlYXJ0cmFjaykvQ3JlYXRpb25EYXRlKEQ6MjAxNTEyMDMwOTI5NTItMDUnMDAnKT4+CmVuZG9iagp4cmVmCjAgOAowMDAwMDAwMDAwIDY1NTM1IGYgCjAwMDAwMDE0MDIgMDAwMDAgbiAKMDAwMDAwMTQ5MSAwMDAwMCBuIAowMDAwMDAwMDE1IDAwMDAwIG4gCjAwMDAwMDE1NzkgMDAwMDAgbiAKMDAwMDAwMTIzNiAwMDAwMCBuIAowMDAwMDAxNjQyIDAwMDAwIG4gCjAwMDAwMDE2ODcgMDAwMDAgbiAKdHJhaWxlcgo8PC9Sb290IDYgMCBSL0lEIFs8Y2RmYjYwYjE2YjY0YTM5MGZiNGQ1ZTI1ZGU4ZmNkMTg+PGQ2OWY0NzdkZTUxZGQ0YjVhMzZkZGEwZjJmMDMzZGJiPl0vSW5mbyA3IDAgUi9TaXplIDg+PgpzdGFydHhyZWYKMTg5OAolJUVPRgo=

But pdf is not getting generated or open in browser, any kind of suggestions or help will be appreciated.

Answer 1

I use this in my projects and it works fine.

HTML

<div id="myCanvasContainer"></div>

JS

function renderPDF( pdfBase64 ) {

var pdfUint8Array = base64ToUint8Array( pdfBase64 );

var canvasContainer = document.getElementById('myCanvasContainer');
var options = options || { scale: 1.5 };

function renderPage(page) {
    var viewport = page.getViewport(options.scale);
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');
    var renderContext = {
      canvasContext: ctx,
      viewport: viewport
    };

    canvas.height = viewport.height;
    canvas.width = viewport.width;
    canvasContainer.appendChild(canvas);

    page.render(renderContext);
}

function renderPages(pdfDoc) {
    for(var num = 1; num <= pdfDoc.numPages; num++)
        pdfDoc.getPage(num).then(renderPage);
}

function base64ToUint8Array(base64) {
    var raw = atob(base64);
    var uint8Array = new Uint8Array(raw.length);
    for (var i = 0; i < raw.length; i++) {
      uint8Array[i] = raw.charCodeAt(i);
    }
    return uint8Array;
}


PDFJS.disableWorker = true;
PDFJS.getDocument(pdfUint8Array).then(renderPages);

}

Hope it helps.