In order to view my pdf files using Mozilla's pdfjs plugin, I currently pass a query parameter to viewer.html like this:
http://localhost/MyProject/viewer.html/?file=file.pdf
Although this method works fine for me, I have a unique requirement for my project. I want to implement a tab-like feature on a single page, where each tab contains a different pdf file.
My plan is to refactor the code in the viewer.js file and turn it into a large function that can be used as a constructor to render individual pdf files. For example:
var firstPdf = new paintPdf({file: 'myfile.pdf'});
However, I have decided to tackle this modification later, once I successfully integrate pdfjs's viewer functionality into my project.
A brief overview of my project:
- This project is a single page application.
- All templates are stored within a single file under an object named
templates.
To achieve my goal, I started by copying all the HTML content inside the body tags of viewer.html and adding it as a new property to the templates object. Then, I copied the required files from the example to my project folder and loaded them dynamically. The necessary files include:
- pdf.js
- pdf.worker.js
- viewer.js
- l10n.js
- viewer.css - (this file is not loaded dynamically)
After loading these files, I attempted to render the template from viewer.html using lodash. However, I am unable to see the rendered pdf in my project. I suspect this could be due to the dynamic nature of the process (although everything appears to be rendering in sequence).
As a side note, I have placed a default pdf file named
compressed.tracemonkey-pldi-09.pdfindex.html file. What might I be overlooking?
I have not encountered any errors on Firefox or Chrome.
Please advise if I am approaching this task incorrectly and suggest ways to steer me in the right direction.