javascript - 如何打印可滚动的 DIV 内容

Question

有一个网站，我想打印其div内容。问题是 div 是可滚动的，我无法打印所有内容。我已经尝试display:none了所有 div，除了我要打印的那个，然后使用了 Google Chrome 的 Awesome Screenshot 扩展，但它不会只滚动那个 div。

我猜我已经读过关于在 HTML 中使用 Javascript，但我不知道如何使用该代码。这不是我的网站，那么如何注入该代码以便打印内容？

Answer 1

我不确定您使用的是哪个网站 - 但在 IE 中您可以打开 F12 开发人员工具，找到您要显示的 div 并即时修改样式：

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

然后它会导致 div 显示它的所有内容，没有滚动条......希望这会有所帮助！

Answer 2

没有看到页面或不知道它的布局，很难知道该建议什么看起来不可怕。

但是，如果隐藏所有其他内容（我假设在打印样式表中）有效，那么您可以添加：

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

一次显示所有内容。

Answer 3

让所有父母都可见

我为此苦苦挣扎了几个小时，最后注意到问题是某些父标签阻止了 div 完全可见，而是在打印件上显示了来自某些父标签的滚动条。

因此，最终有效的解决方案是将所有规则（在其他答案中提到）应用于所有可能位于中间的父标签，还包括一条!important规则，这样它们就不会被绕过。

像这样：

@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;
  }
}

这适用于我项目中的几乎所有情况。

Answer 4

使用这个 JS 函数：
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;
}

Answer 5

我的回答基于@Porschiey和@Paul Roub给出的答案，并稍加补充。

他们给定的解决方案在大多数情况下确实对我有用，除了一些<div>我想打印的 CSS 设置为position: fixed. 在生成的打印中，这通常只包含能够适应<div>加载页面实际大小的内容。
因此，我还必须将位置 CSS 属性更改为类似relative这样的东西，以便可以打印所有内容。因此，对我有用的结果 CSS 是这样的：-

{
    display: block; /* Not really needed in all cases */
    position: relative;
    width: auto;
    height: auto;
    overflow: visible;
}