CODEWITHSUNDEEP
javascriptnode.jspdfsails.jspdf.js
A.R.K.S
A.R.K.S

Reputation: 1802

PDF.js using display APIs in sails.js

I'm a newbie to MVC frameworks. I need to implement a preview functionality for PDF files for a website. And I don't want to implement it the viewer.html way, I need to use display APIs. I went through Hello world example to learn how to use the APIs. But I'm unable to figure out where will the index.html, hello.js fit in the sails.js.

I tried to get the helloworld example working first. Downloaded the pdf.js and pdf.worker.js into my assets/js/ folder. Kept helloworld.pdf in views folder and made hello.js and index.html into one file - index.ejs. Using routes, I've linked to the view which has index.ejs. But when I click on the link, it throws the error as follows:

>     21|     PDFJS.disableWorker = true;
>     22|     </script>
>  >> 23|     <%
>     24|     'use strict';
>     25|
>     26| var doc =PDFJS.getDocument('helloworld.pdf');
> 
> PDFJS is not defined]

Where as when I cloned the git repository and opened the index.html as given in the tutorial, it worked fine and shows the content.

I may be going wrong in many places. Could someone help me move in the right direction?

My ejs file which has hello.js logic embedded in it:

<!doctype html>
<html>

<head>

    <script src="../../assets/js/pdf.js"></script>
    <script>
    PDFJS.disableWorker = true;    
    </script>    
    <%
    'use strict';

var doc =PDFJS.getDocument('helloworld.pdf');

PDFJS.getDocument('helloworld.pdf').then(function(pdf) {
    pdf.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);
  });
});
%>

</head>

<body>
  <canvas id="the-canvas" style="border:1px solid black;"/>
</body>

</html>

Upvotes: 2

Views: 939

Answers (1)

A.R.K.S
A.R.K.S

Reputation: 1802

So after a long day and many more issues, I figured out some things about sails.js. I faced errors like "PDFJS.workerSrc not specified", or sometimes just a blank canvas without contents.

I did the following to get it to work:

  1. Keep hello.js, PDF.js and PDF.worker.js in the assets/js/ folder.
  2. In layout.js, move the tags for PDF.js, hello.js are under "Stylesheets and Preprocessors" instead of "client-side javascript"

  3. Make sure the order of tags are proper. hello.js should come after PDF.js script tag. 4.In layout.js, define PDFJS.workerSrc as follows:

    PDFJS.workerSrc = "/js/pdf.worker.js"

    between hello.js and pdf.js.

    1. keep your index.ejs file in views and define routes properly.
    2. Remove the script tag for pdf.worker.js from layout.js if it has been automatically included.

Upvotes: 2

Related Questions