22

There is a website that I would like to print the div content of. The problem is that the div is scrollable and I'm not able to print all the content. I've tried display:none on all the divs except the one I want to print and then used the Awesome Screenshot extension for Google Chrome but it won't scroll just that div.

I've read about using Javascript in the HTML, I'm guessing, but I don't know how to use that code. It's not my website so how do I inject that code so that it will print the content?

tazboy
  • 1,685
  • 5
  • 23
  • 39

6 Answers6

34

I'm not sure what website you're using - but in IE you can open up F12 Developer tools, find the div you want to display, and modify the style on the fly:

{
    display: block;
    width: auto;
    height: auto;
    overflow: visible;
}

It would then cause the div to display all it's content, without scrollbars... hopefully this helps!

Will Beason
  • 3,417
  • 2
  • 28
  • 46
Porschiey
  • 1,981
  • 2
  • 17
  • 25
14

Without seeing the page or knowing its layout, it's hard to know what to suggest that won't look horrible.

But, if hiding all other content (in a print stylesheet, I assume) works, you may then be able add:

@media only print {
   #idOfYourDiv {
     width: auto;
     height: auto;
     overflow: visible;
   }
}

to show all the contents at once.

Paul Roub
  • 36,322
  • 27
  • 84
  • 93
7

Make all parents visible

I've struggled some hours with this and finally noticed the problem was that some of the parent tags where preventing the div to be fully visible, and instead a scrollbar from some parent tags was being visible on the print.

So the final effective solution was to apply all the rules (mentioned in other answers) to all possible parent tags that could be in the middle, including also an !important rule so they wouldn't be bypassed.

Like this:

@media print {
  body, .CLASS-of-parent-tag, #ID-of-div-with-long-content {
    display: block !important;
    position: relative !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    margin-left: 0 !important;
  }
}

This applies for almost any case in my projects.

DavidTaubmann
  • 3,223
  • 2
  • 34
  • 43
1

**DANGEROUS APPROACH**

Use this JS function:
Printable DIV is div1

function printpage(){
    var originalContents = document.body.innerHTML;
    var printReport= document.getElementById('div1').innerHTML;
    document.body.innerHTML = printReport;
    window.print();
    document.body.innerHTML = originalContents;
}
AbhiNickz
  • 1,035
  • 2
  • 14
  • 32
  • 4
    This code will stop all events like scrolling , if using css models for alert or data showing , their event like close model will also not work – Syed Ali Dec 29 '16 at 06:11
  • 1
    This is a VERY dangerous approach for websites that have heavy JavaScript implementation, like WebApps. It breaks all addEventListeners and similars attached to objects, since they are being deleted and a new copy is inserted. Maybe another approach would be possible if you use a super layer above everything. Nevertheless I prefer a simple CSS approach, that's why it exists. – DavidTaubmann Jul 31 '19 at 19:15
  • I agree, but this is just another hack for printing the `div` contents (small table like structure) with plain JavaScript. – AbhiNickz Jul 31 '19 at 20:12
1

My answer is based on the ones given by @Porschiey and @Paul Roub with a slight addition.

Their given solution did work for me in most cases except for some where the <div> that I wanted to print had a CSS set to position: fixed. In the resulting print, this would usually contain only the content that was able to fit in the actual size of the <div> on the loaded page.
So, I also had to change the position CSS attribute to something like relative so that everything could get printed. So, the resulting CSS that worked for me is this:-

{
    display: block; /* Not really needed in all cases */
    position: relative;
    width: auto;
    height: auto;
    overflow: visible;
}
ManSamVampire
  • 153
  • 2
  • 6
  • I just realised that another user also had a similar observation in another similar [question](https://stackoverflow.com/questions/31300113) and [here](https://stackoverflow.com/a/44005884/11036999) is that answer. – ManSamVampire Jul 05 '19 at 06:30
0

Google messages updated their divs. Use this:

(function() {
    var originalContents = document.body.innerHTML;
    var printReport= document.querySelector("body > mw-app > mw-bootstrap > div > main > mw-main-container > div > mw-conversation-container > div > div > div > mws-messages-list")
    document.body.innerHTML = printReport.innerHTML;
    document.body.style.display = 'block';
    document.body.style.overflow = 'visible';
    window.print();
    document.body.innerHTML = originalContents;
}())
Jason Kyzer
  • 11
  • 1
  • 2