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.

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, May 31 '15 at 20:13
@SteveH. yes I had. I actually kind of solved it. I can't remove the bounty now. — Mr_Green, Jun 03 '15 at 03:58
You can answer your own questions. Just add an answer and explain your solution. — Steve H., Jun 03 '15 at 03:59

score 8 · Accepted Answer · answered Jun 07 '15 at 15:13

8

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.

answered Jun 07 '15 at 15:13

Mr_Green

40,727
45
159
271

Could you please provide info on how to create our own custom viewer in Angular? – user3660375 Sep 29 '21 at 11:15
Hey, it should be the same.. as I explained the JavaScript way. Angular is just on top of JavaScript. – Mr_Green Sep 29 '21 at 13:01
I am having difficulty in bringing up pdfjs in angular without wrapper. Can we meet if you have sometime. I want to understand how to integrate other files on top of pdfdist – user3660375 Sep 29 '21 at 14:31
@user3660375 I don't think I remember much as this is 6 years before. I am not working on Angular from 4 years now. – Mr_Green Sep 30 '21 at 04:36

Modifying viewer.js file

1 Answers1