可滚动div的内容如何打印

Question

可滚动div的内容如何打印

3

我有一个合同，它在可滚动的 div 中显示。我想给我的用户打印可滚动 div 的内容的能力。这个 div 大约有三页长。我在这个应用程序中使用 bootstrap，并尝试使用“visible-print”css 类。当我现在测试打印功能时，在 chrome 打印预览屏幕上只显示了可滚动 div 顶部的内容，它还带有垂直滚动条并截断了剩余内容。

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>

- Questifer

“#scrollabeDiv” 是唯一需要打印的内容吗？您是否考虑过在一个空白窗口中打开相同的内容并使用“window.print()”，以避免打印页面的其余部分？这对您有用吗？ - Gui Imamura

那是一个可能性。有没有一种方法可以在不牺牲用户体验的情况下实现呢？我不确定用户会不会感到不便，因为他们需要打印按钮来将合同呈现在另一页/标签上。 - Questifer

我觉得在新窗口打开可打印内容是可以的。您可以通过在目标上运行 window.print() 来触发打印命令，这样用户就不必实际点击打印按钮了。请尝试 @Sun_Sparxz 给出的答案，并告诉我们是否有效。 - Gui Imamura

4个回答

1

Sun_Sparxz的回答已经足够稳定，但我想补充一个你可能会遇到的棘手问题...

几个小时后，我意识到我的body标签中有一个'position:fixed'，这阻止了上述解决方案的工作。确保你删除它，否则你的打印逻辑可能无法工作。一旦我这样做了，media标签就像预期的那样运作了。

- John Linton

1

虽然这不是你解决问题的确切答案，但你可以参考这个示例：

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

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

- Kevin Brown

0

这个问题困扰了我几个小时：确保在CSS指令中，在@media print部分重新定义它们之前，#scrollableDiv和.visible-print已经被定义，否则它将无法正常工作。

- Daniel Baettig

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Josh · Accepted Answer

试一试

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