Using pdf.js to display pdf from raw data

Question

I am just getting started with pdf.js and I am trying to load a pdf file from the raw pdf data. I have seen the code:

PDFJS.getPdf(\'cwpdf.pdf\', function getPdf         


        

Answer 1

I put together some complete code and was able to find the problem with the solution below:

var int8View = new Uint8Array(...); //populate int8View with the raw pdf data
PDFJS.getDocument(int8View).then(function(pdf) {
}

When using this solution I ran into the problem other users have seen (@MurWade and @user94154) - the stream must have data error message. It looks like the problem is in the following line:

var int8View = new Uint8Array(...);

The array containing the data does not get properly created, since the data is not in the expected format. Therefore, this line works for some cases, but it might not work in the general case.

I've put together a complete solution, that seems to work better. It loads a PDF file, and it converts it to a raw PDF stream. This is there just for testing purposes, in a real world example, the PDF stream will probably be received in a different fashion. You can examine the stream in a debugger, and it will show as plain text. Below is the key line of the code to make this sample work. Instead converting the raw PDF stream to an array, convert it to data.

var docInitParams = { data: pdfraw };

Then proceed with loading the data. Below is the complete working sample of how to load a standard raw PDF stream and display it. I used to PDF JS hello world sample as a starting point. Please let me know in the comments if any clarification is necessary on this.

'use strict';

PDFJS.getDocument('helloworld.pdf').then(function(pdf) {


  pdf.getData().then(function(arrayBuffer) {
    var pdfraw = String.fromCharCode.apply(null, arrayBuffer);

    var docInitParams = {
      data: pdfraw
    };
    PDFJS.getDocument(docInitParams).then(function(pdfFromRaw) {
      pdfFromRaw.getPage(1).then(function(page) {
        var scale = 1.5;
        var viewport = page.getViewport(scale);

        var canvas = document.getElementById('the-canvas');
        var context = canvas.getContext('2d');
        canvas.height = viewport.height;
        canvas.width = viewport.width;

        var renderContext = {
          canvasContext: context,
          viewport: viewport
        };
        page.render(renderContext);
      });
    });
  });
});