JS实现页面打印，控制打印时显示隐藏

点击打印调出打印预览，并实现只显示打印区域div。

实现效果

实现代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>打印</title><!-- 打印区域 --><style  media="print">/* 不打印区 */.noprint {display:none;}/* 实现每个div分别打印 */.print-page-next {page-break-after:always}/* 也可以不用page-break-after:always，用以下方法实现分页打印 */
/*       .print{width: 100vw;height: 99vh;color: #000;border:1px solid #000;} */</style><!-- 非打印区域 --><style></style>
</head>
<body><!-- 打印区 --><div class=""><div class="print-page-next">div1</div><div class="print-page-next">div2</div><div class="print-page-next">div3</div></div><!-- 非打印区 --><div class="noprint"><button class="btn">print</button></div><script>document.querySelector('.btn').addEventListener('click',()=>{window.print()})</script>
</body>
</html>

JS实现页面打印，控制打印时显示隐藏相关推荐

原生js设置div隐藏或者显示_10种JS控制DIV的显示隐藏代码
div隐藏与显示 #menus { background-color: #c4cff0; } function Layer_HideOrShow(cur_div) { var current=docu ...
js控制ul的显示隐藏，对象的有效范围
js控制ul的显示隐藏,对象的有效范围 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...
JS控制DIV的显示隐藏
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
nwjs解决页面透明化，启动时显示白屏的问题
nwjs解决页面透明化,启动时显示白屏的问题参考文章: (1)nwjs解决页面透明化,启动时显示白屏的问题 (2)https://www.cnblogs.com/jinling/p/6068918. ...
Vue按钮控制身份证号码显示隐藏中间部分
在实际开发中经常会遇到点击小眼睛图标控制身份证号码显示隐藏的情况.比如: 这是我在实际开发中遇到的问题,或许方法有点笨,但是可以实现,有大神请指教. 1.首先在data中保存数据,并且定义一个布尔值变 ...
css hover选择器悬停时显示隐藏的内容
css hover选择器悬停时显示隐藏的内容 ul li a name{position: absolute;text-align: center;color:white;visibility: h ...
AutoCAD打印预览时显示空白
AUTOCAD打印时,首先按"CTRL+P",调出打印界面.1 选择打印机.2 选择图纸尺寸(A3或者A4).3 打印区域--打印范围选项下,最好选择"窗口", ...
flutter控制显示隐藏_leaflet中如何通过透明度控制layerGroup的显示隐藏
最近在leaflet开发过程中,遇到地图数据需要按时序播放的需求,处理思路是将每个时间节点的要素添加到layerGroup中,然后通过切换layerGroup的显示隐藏来实现效果.翻看leaflet的 ...
通过class控制div的显示隐藏
场景: 同一个页面存在新增编辑功能,现需要根据一个选择框去控制其他输入框的显示隐藏. (其实新增编辑应该合到一个页面中,但由于项目较老和其他客观因素导致分开写) 实现: 如下图的js中,通过(.ext ...

JS实现页面打印，控制打印时显示隐藏

实现效果

实现代码

JS实现页面打印，控制打印时显示隐藏相关推荐

最新文章

热门文章