html print designated area

html print designated area

One, CSS settings print area

@media print {
    
    
    .topcon, .header, .navbar, .footer, .position, .wzfbxx, .wzbot, .scan_code_box {
    
    
    	display: none;
    }
    .secnr {
    
    border: 0;}
    a[href]:after {
    
    
        content: none !important;
    }
}

2. Print button

<a href="javascript:window.print();">【打印此页】</a>

Using the windows shortcut ctrl+p is also applicable.

Three, encounter problems

Problem : There is an extra blank page on the printed page.
Solutions :
(1) Check whether the html and body height are fixed values ​​(or 100%)

html,body {
    
    font-family:微软雅黑,Microsoft yahei;font-size:14px;background: #fff;min-width: 1200px;width:100%;height:100%;}

To:

html,body {
    
    font-family:微软雅黑,Microsoft yahei;font-size:14px;background: #fff;min-width: 1200px;width:100%;height:auto;}

(2) Check whether there is forced paging after the elements that need to be printed

<!-- 需要打印的元素之后，增加以下内容可强制分页，若取消强制分页，删除以下内容或将属性值改为avoid -->
<div style='page-break-after:always'></div>