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

pobjuy32  于 2023-01-24  发布在  Java
关注(0)|答案(6)|浏览(272)

有一个网站,我想打印的div内容。问题是,该div是可滚动的,我不能打印所有的内容。我已经尝试了display:none对所有的div,除了一个我想打印,然后使用真棒截图扩展谷歌Chrome浏览器,但它不会滚动只有该div。
我想我读过关于在HTML中使用Javascript的文章,但是我不知道如何使用这些代码。这不是我的网站,所以我该如何注入这些代码,以便它打印内容?

a64a0gku

a64a0gku1#

我不知道你用的是什么网站--但是在IE中你可以打开F12开发工具,找到你想显示的div,然后动态修改样式:

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

然后,它将使div显示所有内容,而不显示滚动条...希望这能有所帮助!

uajslkp6

uajslkp62#

在没有看到页面或了解其布局的情况下,很难知道该建议什么才不会看起来很糟糕。
但是,如果隐藏所有其他内容(我假设是在打印样式表中)有效,那么您可以添加:

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

一次显示所有内容。

vptzau2j

vptzau2j3#

使所有父对象可见

我已经为此挣扎了几个小时,最后注意到问题是一些父标记阻止了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;
  }
}

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

bfrts1fy

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

zqdjd7g95#

我的答案基于@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;
}
g6baxovj

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;
}())

相关问题