Print contents of scrollable div

问题

I have a contract that is being displayed in a scrollable div. I'd like to give my users the ability to print the contents of the scrollable div. The div is roughly three pages long. I'm using bootstrap for this application and have tried the 'visible-print' css class available to me. When I test the print functionality now, only what's in the top of the scrollable div is displayed in the chrome print preview screen with a vertical scrollbar and it cuts off the remaining content.

CSS:

#scrollableDiv{
  width: 100%;
  height: 700px;
  overflow-y: scroll;
}

@media print,
 (-o-min-device-pixel-ratio: 5/4),
 (-webkit-min-device-pixel-ratio: 1.25),
 (min-resolution: 120dpi) {
}

@media print {
* {
    background: transparent !important;
    color: #000 !important; /* Black prints faster: h5bp.com/s */
    box-shadow: none !important;
    text-shadow: none !important;
  }

  thead {
    display: table-header-group; /* h5bp.com/t */
  }

  tr,
  img {
    page-break-inside: avoid;
  }

  img {
    max-width: 100% !important;
  }

  @page {
    margin: 0.5cm;
  }

  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }

  h2,
  h3 {
    page-break-after: avoid;
  }

  .visible-print {
    display: block !important;
    overflow: visible;
  }
}

HTML:

<div id="scrollableDiv" class="margin-bottom-20">
    <div class="visible-print">
        <!-- CONTRACT CONTENTS HERE -->
    </div>
</div>

回答1:

Try this

  @media print {
                 #scrollableDiv{
                  width: 100%;
                  height: 100%;
                 }
               .visible-print{
                 display: block;
                 width: auto;
                 height: auto;
                 overflow: visible;  
                }
               }

回答2:

While this is not the exact answer to your solution, you could look at this sample:

http://www.cloudformatter.com/CSS2Pdf.CustomTipsTricks.ContinuedTableHeaders

The table in that sample inside a scrollable area and the whole table renders to PDF. We developed this solution for rendering to overcome many of the limitations in a simple browser-based print.

回答3:

Sun_Sparxz's answer above is solid enough, but I would add a tricky issue you may run into...

After a few hours I realized I had a 'position:fixed' in my body tag which was preventing the above solution from working. Make sure you remove that or your print logic may not work. Once I did, the media tag operated as expected.

回答4:

This problem has just nagged me for a few hours: Ensure that in your CSS instructions #scrollableDiv and .visible-print are defined BEFORE you re-define them under the @media print section, otherwise it will not work.

来源：https://stackoverflow.com/questions/31300113/print-contents-of-scrollable-div

标签

html

css

printing