CODEWITHSUNDEEP
javascriptjqueryhtmlpdf
jbonlinea
jbonlinea

Reputation: 302

Multipage pdf - display specific page in html or js

I've seen there are few options to display a pdf file within an HTML page

cf.(among others) Recommended way to embed PDF in HTML?

Ok, what about if my pdf is multipage and I want to display a specific page ? And only a specific page as if it was an image, meaning that the user can't scroll within the pdf.

Q) can I, and how to display a given page of a given pdf ?

imagine a kind of slide-show system, the aim would be to display within a <div> a given page of a given pdf according to the user's demand.

EDIT

ok I've been re-thinking this and actually my question should have been

How can I do exactly like in the previous/next exemple (http://mozilla.github.io/pdf.js/examples/learning/prevnext.html) if my project is hosted on a shared server on which I can't have an ssh access, install any packages or add librarie etc.

many thank's

Upvotes: 0

Views: 10847

Answers (3)

Nathangrad
Nathangrad

Reputation: 1466

Regarding this example,
I think that you should use the "View Source" feature in whichever browser you're using to get the HTML and JS for it, then add a JavaScript timer to trigger the onPrevPage(); and onNextPage(); JS functions.
If you need help creating a JS timer using the setInterval function to change the pageNum variable, see the following link:
http://www.w3schools.com/js/js_timing.asp

Upvotes: -1

Nathangrad
Nathangrad

Reputation: 1466


This is entirely my personal opinion and it's your choice whether to use this way or not, but I would recommend having an iframe with the src set to the required PDF document. Then, add some HTML input buttons with their onclick attribute set to change the source of the iframe to include the parameter for the page number (#page=3). As an example of what I mean, take a look at the code sample below:

<iframe id="example" src="http://www.adobe.com/content/dam/Adobe/en/devnet/acrobat/pdfs/pdf_open_parameters.pdf"></iframe>
<input value="Page 5" type="button" onclick="document.getElementById('example').src='http://www.adobe.com/content/dam/Adobe/en/devnet/acrobat/pdfs/pdf_open_parameters.pdf#page=5';" />
<input value="Page 1" type="button" onclick="document.getElementById('example').src='http://www.adobe.com/content/dam/Adobe/en/devnet/acrobat/pdfs/pdf_open_parameters.pdf';" />

Upvotes: 2

Devaffair
Devaffair

Reputation: 182

Probably the best approach is to use the PDF.JS library. It's a pure HTML5/JavaScript renderer for PDF documents without any third-party plugins.

Online demo: http://mozilla.github.com/pdf.js/web/viewer.html

GitHub: https://github.com/mozilla/pdf.js

This is probably the best way to do it with JavaScript/HTML5

(Access specific page) http://mozilla.github.io/pdf.js/web/viewer.html#page=13

Upvotes: 1

Related Questions