1

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
}
Vaibhav Jain
  • 32,717
  • 43
  • 105
  • 161

5 Answers5

1

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.

Community
  • 1
  • 1
Rasmus Franke
  • 4,324
  • 8
  • 44
  • 62
1

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.

Chait
  • 1,030
  • 2
  • 17
  • 29
deach
  • 348
  • 1
  • 2
  • 12
0

Try this, But first include this library

$('YourDiv').printElement();

Or

Read this article on Div Printing

Talha
  • 18,147
  • 8
  • 47
  • 64
0

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.

Jason
  • 7,457
  • 13
  • 75
  • 120
  • https://stackoverflow.com/questions/29482477/how-do-i-print-the-entire-bootstrap-modal-where-content-in-modal-body-is-scrolle/29523921#29523921 – Sugar Bowl Aug 11 '16 at 20:08
0

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
                    });

                }
Sugar Bowl
  • 1,626
  • 1
  • 19
  • 22