html打印指定区域

html打印指定区域

一、CSS设置打印区域

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

二、打印按钮

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

使用windows快捷键ctrl+p也同样适用。

三、遇到问题

问题：打印页面多出一页空白页
解决办法：
（1）排查html、body高度是否为固定值（或100%）

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

改为：

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

(2) 排查需要打印的元素后是否存在强制分页

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