Geek Answers Handbook

Modifying viewer.js file

According to the Mozilla pdfjs plugin, I can view my pdf files by passing the viewer.html request parameter , as shown below:

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

It works great. But I have several different requirements. The requirement in my project is that I need to have tabs such as a function on one page. Each tab contains a pdf file.

So, I'm going to make all the code in viewer.js great function. So I can use it as a constructor to render each PDF file. Something like that:

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

In any case, I decided to make the above changes later, when I was able to successfully integrate the pdfjs viewing functions into my project.

Summary of my project :

  • Single page application
  • All templates are supported in one file in the name object - templates

To do this, first of all, I copied all the html inside the body viewer.html tag and added it as a new property to the templates object. and then I copied all the necessary and dependent files from the example to the project folder and downloaded them dynamically. Files I Included:

  • pdf.js
  • pdf.worker.js
  • viewer.js
  • l10n.js
  • viewer.css - I do not load this file dynamically.

After downloading the files, I draw a viewer.html template using lodash . However, I cannot see pdf rendering in my project. I suspect this may be because everything happens dynamically. (but I'm not sure, because everything is done sequentially, as it should be)

Btw, I added a default pdf file called compressed.tracemonkey-pldi-09.pdf next to the index.html file. What can I lose?

Firefox and chrome do not produce any errors.

Note. Maybe I'm wrong. It is advisable that I decide in the right directions, it would be noticeable.

+7
javascript mozilla pdfjs
source share
1 answer

Some important points when changing viewer.js .

  • It is recommended that you create your own viewer.js instead of modifying the available viewer.js file, which is actually intended for demo purposes only.
  • You can create your own viewer.js file by visiting all js files available here .

If only the little things can be changed in the existing demo version of viewer.js , then

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

  • This file will start rendering pdf in DomContentLoaded . If you plan to subsequently render a pdf file dynamically, you should comment on this event register and, if necessary, call the following function.

     webViewerLoad();

Hope this helps someone.

+5
source share

More articles:


All Articles