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
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';" />
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
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
Related
How is twitter able to add images to a page without using the <input type='file>.
For example
I try to see their source code to get a better understanding on how they are able to do that but no luck yet on understanding how it is done it seems like they are able to do this without using the <input type='file'> if you guys can give me a link to a article or a code example on how this can be done. I will really appreciate that.
I just see that Twitter is using <div contenteditable="true"></div> with some style and script. Adding contenteditable attribute on element, allows you to edit directly inside the element and inserting an image from your computer too.
Read more about contenteditable change events and the rest is up to you. There are several ways to send data to the server without using <input> and <form> elements like using Ajax.
Here is the example https://jsfiddle.net/sxanyar/9zdjq4rv/
It's more complicated than just using an input instead. However, for the uploading part, you can use https://www.dropzonejs.com/.
DropzoneJS is an open source library that provides drag&drop file uploads with image previews.
You can search for more example drag n drop attachment.
Below is 2 familiar component is use for drag n drop.
https://bootsnipp.com/snippets/D7MvX
https://mdbootstrap.com/plugins/jquery/file-upload/
I want to display the selected pages of a PDF(existing in local machine) inside a window/frame of another PDF file(existing in local machine) in ADOBE Acrobat. How can i go about it . I searched online but i seem to not find any solution . If there is any other way to do this without using java script, is acceptable too.
You may have missed the keywords…
What is pretty common and easy to implement is importing the according page as an icon in a Button field.
The simplest approach would be using the buttonImportIcon() Acrobat JavaScript method (note the requirements for higher privileges). This method allows you to specify the file and the page to be imported.
If you're only doing this when you're authoring the PDF and it doesn't need to be dynamically created, you can simply add a button field and then set the icon property to the PDF you want to show. If you need to do it programmatically, Max's answer will also work.
The system I am working on has a questionnaire in it and then shows the responses to the admin in a nice report on screen. I need to create functionality that turns the on screen report into a pdf, similar to how the browser generates a pdf of the page when you select print. Although I need to only turn a section of the page into pdf. And it would be ideal to be able to alter the HTML so that the pdf page breaks don't interfere with the presentation of the report.
You can download a pdf of how the report looks, generated by the browser functionality. This is just an example, I need the pdf to be generated by a link or button and not include the whole page (the top part in this case).
I have tried some php HTML to pdf generators, but it's difficult because the HTML is dynamically generated so I'm not sure how to send all the HTML, once rendered, to the page that creates the pdf.
To overcome the page breaks, I've considered using javascript or jquery to read the height of the div of each question within the report and then write a simple script to calculate if the next div will fit on the page and if not add a margin on top of that div so that it starts on a new page.
What software can I use to generate the pdf, given these requirements? Either php or javascript. Appreciate the help.
Have you considered Snappy for PHP? It makes use of wkhtmltopdf behind the curtains to convert any HTML document into PDF.
We are using it and it works great.
https://github.com/KnpLabs/snappy
You could try mpdf and use the page-break-inside: avoid property which is actually a CSS property. I have not used this, but it might be what you're looking for.
Looks like you can add this property to the <div> and <table> tags (mPDF Supported CSS).
I was working on converting PDF to HTML but the client wouldn't have it. So here we go. I need a way to tell an inlined pdf form to submit POST to a url. Something or other like:
<!-- Inlined PDF -->
<object type="application/pdf" data="http://xxxxxxx" id="pdf_form">
</object>
<!-- Button I add to the page to do a form submit -->
<input type="button" onclick="javascript: DoSubmit();">
<script type="text/javascript">
// Do a POST with the form data here. Either getting the data out of the pdf
// or using ACROBAT's FDF export & http submit to handle this
function DoSubmit() {
// Get 'pdf_form' and tell it to post it's data to a url
}
</script>
I need it to work this way to the client doesn't have to add a submit button to the pdf whenever they want to add a new form. I'm trying to make the system pretty flexible for adding these forms in; because there are a lot of them.
Best bet is if I don't need to modify the pdfs manually to get this working.
There's also a toolbar that comes up that includes a save button on it. Removing that save button or making that save button do a form submit rather than a pdf file save is also important.
I have good news and I have bad news.
Let's start with the good news as there is fewer of that: You can use JavaScript in PDF just like you can use JavaScript in HTML.
The bad news:
you'll need adapt your PDF to establish a communication between the JavaScript in the PDF and the JavaScript in the HTML. Take a look at an excerpt of my book to find out how to do this. From the HTML, you can trigger a method postMessage(), but this message will only be understood by the PDF if the PDF contains a MessageHandler.
It's a known issue that this doesn't work on every OS (last time I checked, it didn't work on MacOS).
Adobe Reader shows a toolbar that allows people to save a PDF. There is no way to remove that toolbar. I've already answered this question on stackoverflow: Can I hide the Adobe floating toolbar when showing a PDF in browser? Note that the other answer refers to 'Open Parameters'. As far as I know, these parameters can make the upper toolbar in the plug-in visible/invisible, but they have no effect on the 'floating toolbar'.
So i am trying to add a like to my individual posts. So i added this to each of the posts. The posts are generated from database output then assembled with the properly styling in a javascript file.So i added this to the creation mix.
<fb:like href="my_not_so_sweet_website" layout="button_count" show_faces="true" width="200"></fb:like>
Weird part is... None of them show up. THEN i try taking that code that i generated for each post and just copy and paste it to the top of my website, and low and behold A like Button!!!. Any clues? Need more info? Help?
You are using what's called FBML. The like button is rendered on the fly (well, on page load) by a facebook javascript libabry you include on the page- it needs the FBML tags to know what to render.
The problem is that the FB library isn't smart enough to know that you've dynamically added these FBML tags to the DOM.
There is another type of like button that's an iframe, that one should work if you put it in the DOM dynamically. Docs for that are here: http://developers.facebook.com/docs/reference/plugins/like/
-when you enter your info into the widget there will be an option for iframe.
There is also a FBML render function in the FB javascript SDK. Docs are here: http://developers.facebook.com/docs/reference/javascript/fb.xfbml.parse/