CODEWITHSUNDEEP
javascriptjqueryprinting
Vaibhav Jain
Vaibhav Jain

Reputation: 34447

print the content of a div

I need to print whole content of a div. Notice scroll in the div. But when I use Window.print() to print its content, it prints only the visible part on the screen. I want to print all 154 records in the grid, but it prints only 21 records.

enter image description here

Note: I don't want to open a new window.

EDIT: 

javascript function()
{
1. Hide divs that you don't want to print
2. window.print()
3. show the divs you hide in step 1
}

Upvotes: 1

Views: 3673

Answers (5)

Sugar Bowl
Sugar Bowl

Reputation: 1792

I used printThis and it works great with div's that have a fixed height and scrollbar. removeInline: true property prints the entire document even though you can see only a part of it in the div. 

function printpage(divId, title) {
                    var divID = "#" + divId;
                    var divTitle = title;
                    $(divID).printThis({
                        debug: false,
                        importCSS: true,
                        importStyle: true,
                        printContainer: true,
                        pageTitle: divTitle,
                        removeInline: true,
                        printDelay: 333,
                        header: null,
                        formValues: true
                    });

                }

Upvotes: 0

deach
deach

Reputation: 360

Use style sheet with a media type of print -

link rel="stylesheet" type="text/css" media="print" href="print.css"

And change the DIV style -

height:auto;
overflow:auto

When printing (use window.print()) the DIV will increase in height, and hide all the other DIVs.

Upvotes: 1

Jason
Jason

Reputation: 7682

https://github.com/jasonday/jquery.printThis

I wrote the above plugin based on several others, that allows for printing of an element on a page (no popup) and maintaining page styles or loading new css styles specifically for the print element.

Upvotes: 0

Talha
Talha

Reputation: 19282

Try this, But first include this library 

$('YourDiv').printElement();

Or

Read this article on Div Printing

Upvotes: 0

Rasmus Franke
Rasmus Franke

Reputation: 4524

The strongest solution I think is to create an iframe, copy the contents to be printed to that frame, then print it. There are JQuery plugins for this. Duplicate: Print the contents of a DIV

Another possibility is to have a print CSS that hides the stuff that you don't want to print (menus etc.), and also removes the min-height on your table, causing the scrollbar to be removed.

Upvotes: 1

Related Questions