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

cf.(among others) Remended 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 (.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

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

cf.(among others) Remended 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

• javascript
• jquery
• html
• pdf

Share Improve this question Follow edited May 23, 2017 at 10:30 CommunityBot 111 silver badge asked Feb 2, 2016 at 14:42 jbonlineajbonlinea 30211 gold badge33 silver badges1010 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

This is entirely my personal opinion and it's your choice whether to use this way or not, but I would remend 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./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./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./content/dam/Adobe/en/devnet/acrobat/pdfs/pdf_open_parameters.pdf';" />

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./pdf.js/web/viewer.html

GitHub: https://github./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

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./js/js_timing.asp