How to export automatically generated HTML to PDF

Question

I have the following code that partially matches my HTML page.

<script> function close() { MainJavaScript(); } function MainJavaScript() { //var strEntity = " "; var strEntity = document.getElementById('Entity').value; //Images setup by Entity if (strEntity == "MGP") { document.getElementById('displayPic').src="http://mgp75.png"; } else if (strEntity == "MPP") { document.getElementById('displayPic').src="http://mpp75.png"; } else if (strEntity == "RSC") { document.getElementById('displayPic').src="http://rsc75.png"; } else if (strEntity == "MSN") { document.getElementById('displayPic').src="http://msn75.png"; } var strFirstName = "John"; var strLastName = "Doe"; var strSuffix = " "; var strTitle = "DDS"; var strSecondaryTitle = " "; var strDisplayName = strFirstName + " " + strLastName; if (strTitle.trim() != '') strDisplayName += ", " + strTitle; if (strSuffix.trim() != '') strDisplayName += ", " + strSuffix; if (strSecondaryTitle.trim() !='') strDisplayName += ", " + strSecondaryTitle; document.getElementById('FullName').innerHTML = strDisplayName; } </script> <a href="javascript:close()">Submit</a> <table> <tr> <td width="55%"> <div class="first"> <div class="contact-info"> <h3><img id="displayPic" src="" alt=""></h3> </div><!--// .contact-info --> </div> </td> <td width="40%"> <div> <h1><font color="#003893" face="Georgia">Cu Vi</font></h1> <h2><span id="FullName"></span></h2> </div> </td> </tr> </table> 

When I click the Submit button, displayPic and FullName are replaced with the corresponding values ​​using the MainJavascript function. What I want to do is create a PDF file from the output, but unfortunately all the DLLs and the method I found require me to output the HTML file and then convert it to PDF, but since it uses JavaScript, the source always empty, but the display changes after pressing a button.

How can I achieve what I am looking for, converts output to PDF?

Answer 1

You should look at the Xep CloudFormatter. This library, a jquery plugin, prints any html page. So, considering your example, if I started with an HTML template like yours and then with javascript / jquery, I fill in the html and then call xepOnline.Formatter.Format to display it, you will get a beautiful PDF file.

I simplified your code a bit, but here you can learn:

http://jsfiddle.net/kstubs/56x6W/

 function printMe() { tryAtMain(); var imgLoad = imagesLoaded($('#displayPic')[0]); imgLoad.on( 'always', function() { xepOnline.Formatter.Format('print_me', { pageMargin: ".25in" }); }); } function tryAtMain() { // some pic $('#displayPic').attr('src','http://lorempixel.com/output/abstract-qc-370-222-1.jpg'); $('#FullName').html('Johnny Carson'); }