css控制打印时只显示指定区域

时间:2023-03-08 21:47:52
css控制打印时只显示指定区域

CreateTime--2017年9月26日08:16:04

Author:Marydon

css控制打印时只显示指定区域

思路:

  1.使用打印命令@media print;

  2.控制执行打印命令时,非打印区域隐藏。

CSS代码

<style type="text/css">
/* 执行打印命令时,非打印区域隐藏(不会被打印出来) */
@media print{
#noPrintDiv {
display:none;
}
}
</style>

HTML代码

<!-- 需要打印的区域 Start -->
<div id="printDiv">
打印时显示
</div>
<!-- End 需要打印的区域 -->
<!-- 不需要打印的区域 Start -->
<div id="noPrintDiv">
打印时不显示
</div>
<!-- End 不需要打印的区域 -->