Displaying PDF on website using pdf.js

Question

I want to put a file sample.pdf on my website, and want it to be displayed using pdf.js. What I want is to display my own file like the demo, with a toolbar, zooming in/out, etc. So far I can't do that yet.

I did check out the helloworld example, but it simply shows the file like an image, without toolbar, zooming in/out, etc. When I put another file with many pages instead of helloworld.pdf, it just shows the first page.

Answer 1

I am not quite sure what you are looking for but I was able to get this working exactly like the demo. Although you may not want to use that example viewer for your project, you can use the working code as a starting point for your own requirements.

For a simple test you can just clone the project somewhere under a web server into a directory like myproject and visit http://yourservername.com/myproject/web/viewer.html. You should see the pdf appear. This can be a starting point to working with this project. I did this running a very basic Apache server on Linux.

If you are not looking for an example styled like that the demo above you can also see this jsbin from the docs that show how to do something completely customized with working next/previous buttons to move between the pages (as you mentioned you were only seeing the first page).

As a note, it seems that this library does not work properly with Safari. You can see an issue about it here. Unfortunately this makes it unusable for me now as I need to support all current browsers.

Also, remember to watch for the warnings concerning CORS.