Using PDF as a data entry mechanism - javascript

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'.

Related

Display a PDF inside a frame created within another PDF using JavaScript in Adobe Acrobat

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.

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
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

Generate PDF of a section of a php page once rendered into HTML and CSS and account for pdf page-breaks

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).

How to upload files to a server: Multiple Files and Custom UI

I'm trying to implement a UI that would let the end user upload multiple file sot a server, on a custom UI - pretty much the same way GMail or Outlook.net is doing it.
Few things to node:
The <input type="file"> is ugly - and not standard (IE shows a button named 'Browse' to the left of the file name. Chrome shows a button named 'Choose' to the right of the file name).
Most suggestions how to do the UI suggests hiding a input file element with opacity=0, but on top of by custom UI. The 'click' event will open the dialog box, and upon return the file name (without the path) will be available as a $('#file').val(). See this question, as well as the sample on jsfiddle.
I'm also aware HTML5 has a multiple="multiple" attribute now, which will let the user select multiple files.
However, I'm looking for a multiple file solution, which will work on IE8 and above (as well as WebKit, Mozila).
Some people suggested Google is using Flash. This is not true. Their multi file upload is working when flash is disabled.
Now, here is my biggest surprise: Using the developer tools (F12) on both IE and Chrome, looking at both GMail and Outlook.NET - both implementations do not have a <input type='file'> element in the tree (as far as I can tell). Moreover, both implementations are working with IE8 (flash disabled).
What is going on? How do they do it?
EDIT: Why do I think they don't use file input element? Open the developer tools (F12), switch to Console, type: document.getElementsByTagName('input'). There are 24 input elements, 19 of which are type=hidden, none is type=file.
EDIT 2:Thank you all responders and commentators. Indeed - the "there is no other way" argument (in comment) below was valid. As it turns out, both Outlook.NET and GMail will have a <input type='file'> element, which they will add dynamically, only when the user clicks the 'Attach a file' button. Then, they will send a 'click' event to the element, which will trigger the select file dialog.
The witness this, use the F12 development tool (either in Chrome, or in IE), and in the interactive console type: document.querySelectorAll('input[type=file]'). Note that in both implementations, the element is a direct child of body (with display=none).
They do not use iframe for the upload (unlike the only answer below), but simple XHR code to upload, which is now, in HTML5 is available.
The best resource on the Web for how to do it is: https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications. I've went through the steps of #Jay below (which are great), but the Mozilla page is simpler, which is my recommendation. Also, take a quick look at the jsfiddle sample on #Niranjan comment.
I recently implemented a multi file upload UI for an old asp.net website, but the concepts should be the same.
I'm not very good at writing (summarizing code) but here goes.
Create a number of IFrames. I had problems trying to write IFrames after the document loaded due to security restrictions, so had the server render as many as I though the user would use at once.
Add an 'upload' button and handler which first adds a load handler to one of the iframes.
var frame = $('iframe:first');
in the frame load handler ---
frame.load(function () { /* all the code below* /});
2.a. Write the input tag for file and what ever other elements you like into the frame like this
frame.contents().find('body').html("html goes here");
2.b. Now add a handler to the file input in your frame and submit that form:
frame.contents().find('#fileUpload').change( /*submit the form */)
2.c. Now invoke the file upload dialog
frame.contents().find('#fileUpload').click();
2.d. Now that line will block until the dialog returns. When it does you have to check the value of the file upload control for null in case they canceled. This is where i marked the iframe as not in use.
2.e. Ether way you'll need to unbind from the load of the iframe and rebind to a different method that will handle the return (upload complete)
frame.unbind('load');
frame.load(function () { /* handle file uploaded */})
2.e.1. This is where I reported success to the user and released the frame so it could be reused.
2.e.2. Finally unbind from load again from the upload complete method
All of that is in your frame load handler
3.Now cause the frame to load
frame.load();
At least thats how I did it. I uploaded all the files to a handler which reported file % and a loop inside the parent page fired off ajax getting and displaying the progress of each file.
The main idea is if you want multi file upload in an 'ajaxy' style but not using flash or Html 5 you'll need to use a collection of iframes and some fancy script.
Hope this helps.

JavaScript: Changing Language Without Page Reload

I am implementing multilingual support into my webpage. I would like to minimize the page blinking caused from page reload, and I came to the idea to change page language without forcing the whole page to reload. To achieve this, the only possible way that comes to my mind is with the use of JavaScript:
I dynamically load appropriate language .js file with appropriate translations
I manually go through every text object on the page and update it by re-sending the appropriate new text value
To provide you with example code, I paste a code that will update just submit buttons. On the language change, I call a function that loads appropriate .js language file dynamically.
var fileRef = LoadJsCssFile("Language/svk.js", "js", UpdateLanguage);
After the language .js file is fully loaded, I call the function that updates every element containing text on the webpage:
function UpdateLanguage()
{
var buttons = document.getElementsByClassName("submit_button");
for (buttonID in buttons)
{
buttons[buttonID].innerHTML = lang.SUBMIT;
}
};
Manually updating every text object in the webpage is complex and error prone. As I am not very experienced with JavaScript yet, I was thinking, if there is a way to simply refresh the all key elements in the webpage with one JavaScript command without casing the webpage blink?
If you have any other idea, how to effectively implement language change without page blink, I am interested to know. :-)
I found a solution on my own:
I prepare several javascript language files containing strings per every keyword
On language selection button, I import appropriate language file for the language I wish to use
I manually update every text on the webpage through javascript.
The above solution is suitable for smaller sites. for large ones, that would be a lot of work, to update every single text string through javascript.

Categories