打印DIV的内容

JavaScript HTML

番长猴子

2020-03-24

打印DIV内容的最佳方法是什么？

第3164篇《打印DIV的内容》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共7个回答

阿飞 2020.03.24

最好的方法是将div的内容提交到服务器，然后打开一个新窗口，服务器可以在其中将这些内容放入新窗口。

如果不是这样，您可以尝试使用诸如javascript之类的客户端语言来隐藏除div之外的所有内容，然后打印该页面...

SamJim 2020.03.24

开启新视窗
打开新窗口的文档对象，并向其中写入一个简单的文档，其中仅包含您拥有的div和必要的html标头等-您可能还希望将文档放入样式表中，具体取决于您的内容是
将脚本放在新页面中以调用window.print（）
触发脚本

神无 2020.03.24

尽管@BC答案是最好的打印一页。

但是，使用ctrl + P同时打印多页A4尺寸的页面可能会有所帮助。

@media print{
html *{
    height:0px!important;
    width:0px !important;
    margin: 0px !important;
    padding: 0px !important;
    min-height: 0px !important;
    line-height: 0px !important;
    overflow: visible !important;
    visibility: hidden ;


}


/*assing myPagesClass to every div you want to print on single separate A4 page*/

 body .myPagesClass {
    z-index: 100 !important;
    visibility: visible !important;
    position: relative !important;
    display: block !important;
    background-color: lightgray !important;
    height: 297mm !important;
    width: 211mm !important;
    position: relative !important;

    padding: 0px;
    top: 0 !important;
    left: 0 !important;
    margin: 0 !important;
    orphans: 0!important;
    widows: 0!important;
    overflow: visible !important;
    page-break-after: always;

}
@page{
    size: A4;
    margin: 0mm ;
    orphans: 0!important;
    widows: 0!important;
}}

Itachi 2020.03.24

我编写了一个插件来解决这种情况。我对那里的插件不满意，并着手进行更广泛的配置。

https://github.com/jasonday/printThis

小胖 2020.03.24

我认为有更好的解决方案。使div打印以覆盖整个文档，但仅在打印时：

@media print {
    .myDivToPrint {
        background-color: white;
        height: 100%;
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        margin: 0;
        padding: 15px;
        font-size: 14px;
        line-height: 18px;
    }
}

蛋蛋猿 2020.03.24

function printdiv(printdivname) {
    var headstr = "<html><head><title>Booking Details</title></head><body>";
    var footstr = "</body>";
    var newstr = document.getElementById(printdivname).innerHTML;
    var oldstr = document.body.innerHTML;
    document.body.innerHTML = headstr+newstr+footstr;
    window.print();
    document.body.innerHTML = oldstr;
    return false;
}

这将打印div您想要的区域，并将内容设置回原样。printdivname是div要打印的。

飞云Tony 2020.03.24

尽管@gabe已经说过了，但是如果您使用的是jQuery，则可以使用我的printElement插件。

有一个样品在这里，和有关该插件的详细信息在这里。

用法很简单，只需使用jQuery选择器获取一个元素并打印即可：