在实际开发中,有时可能会有打印的需求。下面我总结了2种打印的方法,希望对各位小伙伴有所帮助。
①:直接用window.print()方法就可以打印整个页面,下面是一个小demo
HTML Page //Other content you wouldn't like to print
Other content you wouldn't like to print //Other content you wouldn't like to print
function doPrint() {
var printData = document.getElementById("print").innerHTML; //获得 div 里的所有 html 数据
document.body.innerHTML = printData;
window.print();
}
原文参考:https://www.cnblogs.com/qingtaong/archive/2012/07/27/2611716.html
注:但是上面的方法也有一个问题,就是打印的是整个页面。有时需要打印全部,
有时只需要打印指定部分,要隐藏某些部分。这种情况就要使用第二种方法来解决
②:使用CSS3的media媒体查询控制页面并做局部打印——隐藏掉不需要或不想要打印的部分。下面还是一个demo
.btn {
display: none;
}
X
督导任务编码 | 督导任务内容 | 督导时间 | 门店督导数 | 不合要求门店数 | 虚假执行门店数 |
1 | 1 | 1 | 1 | 1 | 1 |
1 | 1 | 1 | 1 | 1 | 1 |
督导人员 | 督导任务编码 | 督导意见 | 原因描述 |
1 | 1 | 1 | 1 |
活动执行是否合格:
function doPrint() {
window.print();
}
原文参考:https://www.cnblogs.com/qingtaong/archive/2012/07/27/2611716.html
打印时,你会发现打印按钮的button已经被隐藏了。
就是因为这里给button设置了隐藏: