Tuesday 5 May 2015

Print the HTML contents via Element Id or Class Name via Javascript/jQuery

Please use the below function to print the HTML contents via Element Id or Class Name via Javascript/jQuery.
PS: You would require jQuery library to link.
/* 
* Function to print the HTML contents via element Id or Class 
* elem This can be Name of the tag ID or Class 
*/
function PrintMe(elem) {
 
 var pageHeaderTitle = 'Enter you Page Header Title here';
 var bodyTitle = 'Enter you Page Title here';  
 var bodySubTitle = 'Enter you Page Sub Title here'; // (optional) 
 var pageData = jQuery(elem).html();
 
 var siteLogoCaption = 'Your Site Name';
 var site_logo_alt = '/images/logo/logo.jpg';
 
 var css_bootstrap_file_url = 'http://www.yourdomain.com/css/bootstrap.min.css';
 var css_custom_file_url = 'http://www.yourdomain.com/css/custom.css';
 
 var mywindow = window.open('', 'my div', 'height=600,width=800,scrollbars=yes');
 mywindow.document.write('< html>' + pageHeaderTitle + ' - <?php echo $site_name; ?>');
 mywindow.document.write('< link href="' + css_bootstrap_file_url + '" rel="stylesheet" type="text/css">');
 mywindow.document.write('< link href="' + css_custom_file_url + '" rel="stylesheet" type="text/css">');
 mywindow.document.write('< img alt="' + siteLogoCaption + '" height="auto" src="' + site_logo_url + '" style="float: left; margin-left: 40px;" width="100" />');
 mywindow.document.write('< div class="container" id="print_form" >< h3>'+ bodyTitle +'< /h3>');
 mywindow.document.write('< h4>' + bodySubTitle + '< /h4>< hr />');
 mywindow.document.write(pageData);
 mywindow.document.write('< p>---< /p>');
 mywindow.document.write('< /div>< /body>< /head>< /html>');
 mywindow.print();
 mywindow.document.close();
}

/** Invoking the printing function **/
< button class="btn btn-primary" onclick="PrintMe('#divContainerToPrint'); return false;" >Print< /button>

No comments:

Post a Comment

Please post any queries and comments here.