有一个网站,我想打印的div内容。问题是,该div是可滚动的,我不能打印所有的内容。我已经尝试了display:none对所有的div,除了一个我想打印,然后使用真棒截图扩展谷歌Chrome浏览器,但它不会滚动只有该div。我想我读过关于在HTML中使用Javascript的文章,但是我不知道如何使用这些代码。这不是我的网站,所以我该如何注入这些代码,以便它打印内容?
div
display:none
a64a0gku1#
我不知道你用的是什么网站--但是在IE中你可以打开F12开发工具,找到你想显示的div,然后动态修改样式:
{ display: block; width: auto; height: auto; overflow: visible; }
然后,它将使div显示所有内容,而不显示滚动条...希望这能有所帮助!
uajslkp62#
在没有看到页面或了解其布局的情况下,很难知道该建议什么才不会看起来很糟糕。但是,如果隐藏所有其他内容(我假设是在打印样式表中)有效,那么您可以添加:
@media only print { #idOfYourDiv { width: auto; height: auto; overflow: visible; } }
一次显示所有内容。
vptzau2j3#
我已经为此挣扎了几个小时,最后注意到问题是一些父标记阻止了div完全可见,而是一些父标记的滚动条在打印时可见。因此,最后一个有效的解决方案是将所有规则(在其他答案中提到)应用于所有可能位于中间的父标记,其中还包括一个!important规则,这样它们就不会被绕过。就像这样:
!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; } }
这几乎适用于我的项目中的任何情况。
bfrts1fy4#
**DANGEROUS APPROACH**
使用此JS函数:
可打印DIV为div1
function printpage(){ var originalContents = document.body.innerHTML; var printReport= document.getElementById('div1').innerHTML; document.body.innerHTML = printReport; window.print(); document.body.innerHTML = originalContents; }
zqdjd7g95#
我的答案基于@Porschiey和@Paul Roub给出的答案,并略有增加。他们给出的解决方案在大多数情况下确实对我有效,除了一些我想打印的<div>的CSS设置为position: fixed的情况。在最终打印结果中,通常只包含能够适合加载页面上<div>实际大小的内容。因此,我还必须将position CSS属性更改为类似relative的内容,以便可以打印所有内容。因此,为我工作的CSS结果如下:-
<div>
position: fixed
relative
{ display: block; /* Not really needed in all cases */ position: relative; width: auto; height: auto; overflow: visible; }
g6baxovj6#
Google消息更新了它们的div。使用此:
(function() { var originalContents = document.body.innerHTML; var printReport= document.querySelector("body > mw-app > mw-bootstrap > div > main > mw-main-container > div > mw-conversation-container > div > div > div > mws-messages-list") document.body.innerHTML = printReport.innerHTML; document.body.style.display = 'block'; document.body.style.overflow = 'visible'; window.print(); document.body.innerHTML = originalContents; }())
6条答案
按热度按时间a64a0gku1#
我不知道你用的是什么网站--但是在IE中你可以打开F12开发工具,找到你想显示的div,然后动态修改样式:
然后,它将使div显示所有内容,而不显示滚动条...希望这能有所帮助!
uajslkp62#
在没有看到页面或了解其布局的情况下,很难知道该建议什么才不会看起来很糟糕。
但是,如果隐藏所有其他内容(我假设是在打印样式表中)有效,那么您可以添加:
一次显示所有内容。
vptzau2j3#
使所有父对象可见
我已经为此挣扎了几个小时,最后注意到问题是一些父标记阻止了div完全可见,而是一些父标记的滚动条在打印时可见。
因此,最后一个有效的解决方案是将所有规则(在其他答案中提到)应用于所有可能位于中间的父标记,其中还包括一个
!important
规则,这样它们就不会被绕过。就像这样:
这几乎适用于我的项目中的任何情况。
bfrts1fy4#
**DANGEROUS APPROACH**
使用此JS函数:
可打印DIV为div1
zqdjd7g95#
我的答案基于@Porschiey和@Paul Roub给出的答案,并略有增加。
他们给出的解决方案在大多数情况下确实对我有效,除了一些我想打印的
<div>
的CSS设置为position: fixed
的情况。在最终打印结果中,通常只包含能够适合加载页面上<div>
实际大小的内容。因此,我还必须将position CSS属性更改为类似
relative
的内容,以便可以打印所有内容。因此,为我工作的CSS结果如下:-g6baxovj6#
Google消息更新了它们的div。使用此: