Jquery plugin to Print specific div with applied CSS

Mar 6, 2016 1:50 pm

JQuery

Sometime we need to print website, but do not want its header footer sidebar and other things, in short we need to print a specific div or p or table or some other object.
This plugin will allow you to print specific html object along will all css applied on it.
its simple to use.

include jquery library
include print-preview.js plugin
initiate plugin and provide target html object to print

you can specify many other options like want to send additional css to be applied, width/height and more

Live Demo
Download

<script type="text/javascript">
        $(function(){
            $("#btnPrint").printPreview({
                obj2print:'#masterContent',
                width:'810'
                
                /*optional properties with default values*/
                //obj2print:'body',     /*if not provided full page will be printed*/
                //style:'',             /*if you want to override or add more css assign here e.g: "<style>#masterContent:background:red;</style>"*/
                //width: '670',         /*if width is not provided it will be 670 (default print paper width)*/
                //height:screen.height, /*if not provided its height will be equal to screen height*/
                //top:0,                /*if not provided its top position will be zero*/
                //left:'center',        /*if not provided it will be at center, you can provide any number e.g. 300,120,200*/
                //resizable : 'yes',    /*yes or no default is yes, * do not work in some browsers*/
                //scrollbars:'yes',     /*yes or no default is yes, * do not work in some browsers*/
                //status:'no',          /*yes or no default is yes, * do not work in some browsers*/
                //title:'Print Preview' /*title of print preview popup window*/
                
            });
        });
    </script>

$(function(){

$("#btnPrint").printPreview({

obj2print:'#masterContent',

width:'810'

/*optional properties with default values*/

//obj2print:'body', /*if not provided full page will be printed*/

//style:'', /*if you want to override or add more css assign here e.g: "<style>#masterContent:background:red;</style>"*/

//width: '670', /*if width is not provided it will be 670 (default print paper width)*/

//height:screen.height, /*if not provided its height will be equal to screen height*/

//top:0, /*if not provided its top position will be zero*/

//left:'center', /*if not provided it will be at center, you can provide any number e.g. 300,120,200*/

//resizable : 'yes', /*yes or no default is yes, * do not work in some browsers*/

//scrollbars:'yes', /*yes or no default is yes, * do not work in some browsers*/

Jquery plugin to Print specific div with applied CSS

Comments

Write a Reply or Comment Cancel reply

About Author

Recent Posts

Archives

Categories

Search by tags

Recent Comments

Visitors

Jquery plugin to Print specific div with applied CSS

Related Posts

Discounted hostings

Comments

Write a Reply or Comment Cancel reply

About Author

Recent Posts

Archives

Categories

Search by tags

Recent Comments

Visitors