javascript - How to export a auto generated HTML to PDF

Question

I have the following code which is partially what my HTML page does.

<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 the displayPic and the FullName is replaced by the respective values using MainJavascript function. What I am looking to do is create a PDF from the output but unfortunately all the DLLs and method I found requires me to output a HTML file and then convert to a PDF but because it is using JavaScript, the source is always blank but the display is changed once the button is clicked.

How can I achieve what I am looking to do, is convert the output into a PDF?

Answer 1

You should look at Xep CloudFormatter. This library, jquery plugin, prints any html page. So, given your example, if I were to start with an HTML template like you have, and then with javascript/jquery I populate the html and then call xepOnline.Formatter.Format to render it, you will get back a beautiful PDF.

I simplified your code a bit, but here is a fiddle for you to explore:

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-q-c-370-222-1.jpg');
$('#FullName').html('Johnny Carson');
}