打印可滚动div的内容 [英] Print contents of scrollable div

问题描述

我有一个正在显示在可滚动div中的合同。我想让我的用户能够打印可滚动div的内容。 div大约三页长。我为此应用程序使用了引导程序，并尝试了对我可用的可见打印 css类。现在，我测试打印功能时，只有可滚动div顶部的内容才会在带有垂直滚动条的chrome打印预览屏幕中显示，并会切掉其余内容。

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>

推荐答案

尝试一下

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

这篇关于打印可滚动div的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！