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 pressed.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.

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 pressed.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.

• javascript
• mozilla
• pdf.js

• 3 @downvoter will be better if you explain the downvote. – Mr_Green Commented May 31, 2015 at 19:13
• I think down vote was bc question doesn't give nearly enough info. I understand the gist of your Q but without the implementation of your object I wouldn't guess what could be wrong. – Dave Alperovich Commented May 31, 2015 at 20:13
• 1 @SteveH. yes I had. I actually kind of solved it. I can't remove the bounty now. – Mr_Green Commented Jun 3, 2015 at 3:58
• 2 You can answer your own questions. Just add an answer and explain your solution. – Steve H. Commented Jun 3, 2015 at 3:59
• 1 @SteveH. Will definitely do when I have time. – Mr_Green Commented Jun 3, 2015 at 4:06

1 Answer 1

Some important points while modifying viewer.js.

• It is remended 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 ment this event register and call the following function whenever necessary.

  webViewerLoad();
  

I hope this will help someone.