Question

有一个网站，我想打印div的内容。问题是div是可滚动的，我无法打印所有内容。我在所有div上尝试了display:none，除了我要打印的那个，然后使用了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

使用此JS函数：
可打印的DIV div1

conf

Answer 4

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

他们给出的解决方案在大多数情况下对我有用，除了某些情况下，我要打印的<div>的CSS设置为position: fixed。在最终的打印结果中，通常只包含能够适合所加载页面上<div>实际大小的内容。
因此，我还必须将position CSS属性更改为relative之类的内容，以便可以打印所有内容。因此，对我有用的最终CSS是：-

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

Answer 5

让所有父母可见

我为此花了几个小时，终于发现问题是某些父标记阻止了div的完全可见，相反，某些父标记的滚动条却在打印中可见。

因此，最终有效的解决方案是将所有规则（在其他答案中提到）应用于可能位于中间的所有可能的父标记，其中还包括!important规则，以便不会被绕过。 / p>

赞：

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

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

如何打印可滚动的DIV内容

5 个答案:

让所有父母可见