控制页面打印的2种方法（css3的media媒体查询和window.print()）
2021-03-31 05:25
标签：汇总 art 描述 获得 解决 run 设置 title dia 在实际开发中，有时可能会有打印的需求。下面我总结了2种打印的方法，希望对各位小伙伴有所帮助。 ①：直接用window.print()方法就可以打印整个页面，下面是一个小demo 原文参考：https://www.cnblogs.com/qingtaong/archive/2012/07/27/2611716.html 注：但是上面的方法也有一个问题，就是打印的是整个页面。有时需要打印全部，有时只需要打印指定部分，要隐藏某些部分。这种情况就要使用第二种方法来解决 ②：使用CSS3的media媒体查询控制页面并做局部打印——隐藏掉不需要或不想要打印的部分。下面还是一个demo 原文参考：https://www.cnblogs.com/qingtaong/archive/2012/07/27/2611716.html 打印时，你会发现打印按钮的button已经被隐藏了。 就是因为这里给button设置了隐藏： 触发打印事件后，.btn就隐藏了 控制页面打印的2种方法（css3的media媒体查询和window.print()） 标签：汇总 art 描述 获得 解决 run 设置 title dia 原文地址：https://www.cnblogs.com/tu-0718/p/9264318.htmlDOCTYPE HTML>
html>
head>
title>div printtitle>
meta charset="UTF-8"/>
head>
body>
p>HTML Page //Other content you wouldn‘t like to printp>
input name="b_print" type="button" onclick="doPrint();" value=" Print" />
div id="print">
h1 style="Color:Red">The Div content which you want to printh1>
div>
p>Other content you wouldn‘t like to print //Other content you wouldn‘t like to printp>
script>
function doPrint() {
var printData = document.getElementById("print").innerHTML; //获得 div 里的所有 html 数据
document.body.innerHTML = printData;
window.print();
}
script>
body>
html>
DOCTYPE html>
html>
head>
meta charset="utf-8" />
title>督导报告title>
link rel="stylesheet" type="text/css" href="css/jihe-page.css" />
style media="print">
.btn {
display: none;
}
style>
head>
body>
div class="councilor-table">
div class="councilor-table-main1">
h4>督导报告h4>
span id="close-icon">Xspan>
div>
div class="councilor-table-main2">
div class="table-div1">
h5>督导意见h5>
ul>
li>span>督导任务名称span>span>XXXspan>li>
li>span>活动关联门店总数：span>span>50span>li>
li>span>已执行门店数：span>span>30span>li>
ul>
div>
div class="table-div2">
h5>多次督导数据汇总h5>
table border="1" cellspacing="0" cellpadding="0">
thead>
tr>
td>督导任务编码td>
td>督导任务内容td>
td>督导时间td>
td>门店督导数td>
td>不合要求门店数td>
td>虚假执行门店数td>
tr>
thead>
tbody>
tr>
td>1td>
td>1td>
td>1td>
td>1td>
td>1td>
td>1td>
tr>
tr>
td>1td>
td>1td>
td>1td>
td>1td>
td>1td>
td>1td>
tr>
tbody>
table>
table border="1" cellspacing="0" cellpadding="0">
thead>
tr>
td>督导人员td>
td>督导任务编码td>
td>督导意见td>
td>原因描述td>
tr>
thead>
tbody>
tr>
td width="10%">1td>
td width="16%">1td>
td width="32%">1td>
td width="32%">1td>
tr>
tbody>
table>
div>
div>
div class="councilor-table-main3">
h5>督导报告h5>
ul>
li>
span>活动执行是否合格：span>
label id="label-radio1">input type="radio" name="radio" />是label>
label id="label-radio2">input type="radio" name="radio" />否label>
li>
li class="label-radio1-main">span class="textarea-span">原因描述：span>textarea readonly="readonly" rows="5" cols="60">textarea>li>
div class="label-radio2-main">
li>span class="textarea-span">督导意见：span>textarea readonly="readonly" rows="5" cols="60">textarea>li>
li>span class="textarea-span">整改意见：span>textarea readonly="readonly" rows="5" cols="60">textarea>li>
div>
ul>
div class="table-div3">
button>取消button>button>提交报告button>button class="btn" onclick="doPrint();">打印button>
div>
div>
div>
script>
function doPrint() {
window.print();
}
script>
body>
html>
.btn{
display:none;
}
文章标题：控制页面打印的2种方法（css3的media媒体查询和window.print()）
文章链接：http://soscw.com/index.php/essay/70316.html