如何打印可滚动的DIV内容

Question

有一个网站,我想打印的div内容.问题是div是可滚动的,我无法打印所有内容.我尝试display:none了除了我要打印的所有div之外的所有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;
  }
}

这几乎适用于我的项目中的任何情况。