Modifying viewer.js file

Question

According to Mozilla's pdfjs plugin, I can view my pdfs by passing a query param to viewer.html as shown below:

http://localhost/MyProject/viewer.html/?file=file.pdf

This is working fine. But I have some different kind of requirement. The requirement in my project is that I need to have tabs like feature on a single page. Each tab holds a pdf file.

So, I am thinking to make all the code in the viewer.js to a big function. So that I can use it as constructor to render each pdf file. Something like this:

var firstPdf = new paintPdf({file: 'myfile.pdf'});

Anyway, I decided to do the above changes later when I am able to integrate pdfjs's viewer functionality successfully in my project.

Summary of my project:

• Single page application
• All templates are being maintained in a single file within an Object of name - templates

To do so, first of all, I copied all the html inside of the body tag of viewer.html and appended as new property to the templates object. and then I copied all necessary and dependency files from the example to my project's folder and loaded them dynamically. The files which I included are:

• pdf.js
• pdf.worker.js
• viewer.js
• l10n.js
• viewer.css - I am not loading this file dynamically.

After loading of files, I am rendering the viewer.html's template using lodash. Still, I can't able to see the rendered pdf in my project. I suspect this might be because everything is happening dynamically. (but I am not sure because everything is being rendered in sequence as it should be)

Btw, I have added the default pdf with name compressed.tracemonkey-pldi-09.pdf adjacent to index.html file. What could I be missing?

Firefox and chrome doesn't throw any error.

Note: I might be doing in wrong way. Suggesting me to solve in right directions would be appreciable.

Answer 1

Some important points while modifying viewer.js.

• It is recommended to build your own viewer.js instead of modifying the available viewer.js file which is actually just for demo purpose.
• You can create your own viewer.js file by visiting each js files available here.

If you have only small things to modify in the existing demo viewer.js, then

• Mention the exact path for pdf.worker.js file inside your viewer.js.

• This file will start rendering pdf on DomContentLoaded event. If you are planning to render the pdf file dynamically later, then you should comment this event register and call the following function whenever necessary.

  webViewerLoad();
  

I hope this will help someone.