WebPage To PDF Conversion Sample Application

In my earlier post I worte about freepdfconvert.com’s free webpage to pdf conversion service, in continuition to that I created a simple proof of concept sample application using ASP.NET, JavaScript and Yahoo UI aka YUI. Click here to view the live demo

formThe sample application has got a simple form with one text box control, submit and clear buttons. YUI is used to show the progress bar message during the execution of the conversion process. Once the conversion is complete, the generated pdf document will be deliverd through windows save dialog and then the progress bar message disappears (AJAX like downloading). AJAX like functionality is achieved through the usage of dynamic invisible iframe with a call back function.

progress

save

HTML Form (aspx page)

html_form

C# code behind (I am injecting the required YUI js files through code behind) . You can directly reference inside script tags.

Note: YUI is used just for progress message and cosmetic.

c#

var progress;
/*-------------------------------*/
YAHOO.util.Event.addListener(window, "load", function() {
      progress = new YAHOO.widget.Panel("progress", 
                                            { width: "240px", 
                                              fixedcenter: true, 
                                              close: false, 
                                              draggable: false, 
                                              zindex:4,
                                              modal: true,
                                              visible: false
                                            } 
                                        );
     progress.setHeader("Generating PDF File, please wait...");
     progress.setBody("<img src=\"<a href="http://us.i1.yimg.com/us.yimg.com/i/us/per/gr/gp/rel_interstitial_loading.gif\&quot;/">http://us.i1.yimg.com/us.yimg.com/i/us/per/gr/gp/rel_interstitial_loading.gif\"/</a>>");
progress.render(document.body);
});
/*-------------------------------*/
function download()
{
    var txtUrl = $get('<%=txtUrl.ClientID %>');
    if(txtUrl.value==null || txtUrl.value=="")
    {
        alert('Web Page URL Cannot be empty!');
        txtUrl.focus();
        return false;
    }    
    //
    progress.show();    
    // 
    if($get("ifraDownLoad")!=null)
    {
        DestroyIframe($get('ifraContainer'), $get("ifraDownLoad"));
    }
    // 
    CreateIFrame($get('ifraContainer'),"ifraDownLoad");
    //
    var objFrame = $get("ifraDownLoad"); 
    objFrame.onload = function (){ callback("ifraDownLoad"); } //Attach Callback function
    objFrame.style.display = "none";
    objFrame.style.height = "1px";
    objFrame.src = getUrl();
    return false;
}
/*-------------------------------*/
function getUrl()
{
    var txtUrl = $get('<%=txtUrl.ClientID %>');   
    var url = "<a href="http://web2pdf.freepdfconvert.com/HTMLtoPDFTemplate.aspx">http://web2pdf.freepdfconvert.com/HTMLtoPDFTemplate.aspx</a>?";
    url +="cURL=" + txtUrl.value;
    url +="&author=";
    url +="&subj=";
    url +="&title=";
    url +="&app=http://www.freepdfconvert.com";
    url +="&keywords=";
    url +="&allowcpy=";
    url +="&allowmodif=";
    url +="&allowprn=";
    url +="&keylen=";
    url +="&userpass=";
    url +="&ownerpass=";
    url +="&preservelinks=yes";
    url +="&compress=flate";
    url +="&marginleft=";
    url +="&marginright=";
    url +="&margintop=";
    url +="&marginbottom=";
    url +="&psize=";
    url +="&porient=";
    url +="&ctype=";
    url +="&allowscript=yes";
    url +="&outputmode=stream";
    return url;
}
/*-------------------------------*/
function callback(frameid) {
progress.hide();
}
/*-------------------------------*/
function CreateIFrame(oSrcCtrl,strFraId) {
    var iframe = document.createElement("iframe");
    iframe.setAttribute("id", strFraId);
    iframe.setAttribute("scrolling", "no");
    iframe.setAttribute("frameBorder", "0");    
    oSrcCtrl.appendChild(iframe);
}
/*-------------------------------*/
function DestroyIframe(oSrcCtrl,oFrame)
{     
    if (document.all)
    { 
        document.all[oFrame.id].outerHTML = '';
        oFrame=null;
    }
    else
    {
        oSrcCtrl.removeChild(oFrame);
        oFrame=null;
    }
}

One thought on “WebPage To PDF Conversion Sample Application

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s