0

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

Community
  • 1
  • 1
jbonlinea
  • 192
  • 1
  • 9

3 Answers3

2


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';" />
Nathangrad
  • 1,426
  • 10
  • 25
  • Hi, that's a solution indeed, but I'm more loking for something like this http://mozilla.github.io/pdf.js/examples/learning/prevnext.html in term of functionality, with the exception that the user won't get button but the page will change according to the value of a js variable colected elsewhere – jbonlinea Feb 02 '16 at 15:12
  • Hi, thank's for your porposal, actually I've forgottent to precise in my post that I wanted to have one page displayed, as if it was an image, so the use of pdfjs is better suited for my needs. – jbonlinea Feb 03 '16 at 21:59
1

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

Devaffair
  • 182
  • 14
  • Thank's for this answer, but I may have miss-formulated my question. Actually I would like to display a specific page, and only this page, I don't want the user to be able to scroll the pdf, as if each page were an image. – jbonlinea Feb 02 '16 at 15:01
  • See other examples e.g. at http://mozilla.github.io/pdf.js/examples/learning/helloworld.html – async5 Feb 02 '16 at 18:54
  • hi, thank's for your replies, indeed pdfjs is probably the way to go ! and the "hello word" or the "previous-next" exemple are ont top. – jbonlinea Feb 03 '16 at 22:05
-1

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

Nathangrad
  • 1,426
  • 10
  • 25
  • If you have some trouble with this, you may want to consider using BootStrap's carousel slideshow system. Please reply if you'd like me to provide some more information on this. – Nathangrad Feb 02 '16 at 15:39
  • Hi, indeed I'll use a js to trigger the onPrevPage() function, however the setInterval won't do the job for me as I want the slides to change according to the value of a js varialble that contain the elapsed time video that I get through the vimeo api. actually I'm still stuck with this point see here http://stackoverflow.com/questions/34966189/function-increment-sync-with-video-or-auto-increment and here http://stackoverflow.com/questions/34995013/assign-an-interval-mathematic-to-a-js-variable, but it's an another story I'll address later – jbonlinea Feb 03 '16 at 22:12
  • for bootstraps, the carousel look's nice, I'll have a closer look, but I may do the same within hype so will see – jbonlinea Feb 03 '16 at 22:26
  • @Nathangrad Hi. Can you tell me something more about how to use carousel or adding a timer in my situation. https://stackoverflow.com/q/54436219/5748603 – Andry Jhonas Jan 30 '19 at 09:02