Question

我的合约正在滚动div中显示。我想让我的用户能够打印可滚动div的内容。 div大约有三页长。我正在为这个应用程序使用bootstrap，并尝试了'visible-print'css类可供我使用。当我现在测试打印功能时，只有可滚动div顶部的内容显示在带有垂直滚动条的chrome打印预览屏幕中，它会切断剩余内容。

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>

Answer 1

试试这个

SELECT NUM_SEQUENCIAL, COD_DIAGNOSTICO
FROM PCE_RP.DIAGNOSTICOS_DOENTE 
GROUP BY NUM_SEQUENCIAL
HAVING COUNT(NUM_SEQUENCIAL) = 1

Answer 2

虽然这不是您的解决方案的确切答案，但您可以查看此示例：

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

该示例中的表格位于可滚动区域内，整个表格呈现为PDF格式。我们开发了这种渲染解决方案，以克服基于浏览器的简单打印中的许多限制。

Answer 3

Sun_Sparxz上面的回答足够扎实，但我会添加一个你可能遇到的棘手问题......

几个小时后，我意识到自己有一个位置：固定＆＃39;在我的身体标签，这阻止了上述解决方案的工作。确保删除它或您的打印逻辑可能无法正常工作。完成后，媒体标签按预期运行。

Answer 4

这个问题使我困扰了几个小时：确保在CSS指令中#scrollableDiv和.visible-print已定义，然后在 @media print 部分下重新定义它们，否则不起作用。

打印可滚动div的内容

4 个答案: