先说需求：点击打印调出弹出框->弹出框内展示打印内容->点击打印调出浏览器打印->浏览器打印预览为弹出框内容
一、先说最终成品
1.首页内容
2.点击打印弹出打印内容
3.点击打印调出浏览器打印打印弹出框内容
二、过程
核心思路是控制浏览器打印内容盖住body的内容
1.首页代码 .print { background-color: #fff; height: 100%; // 盖住body } @media print { body * { visibility: hidden; } .print, .print * { visibility: visible; } .print { position: fixed; // 把内容定住 left: 0; top: 0; } }
就是简单的调出弹框组件没啥可说的 2.弹出框组件 .print { background-color: #fff; height: 100%; // 盖住body } @media print { body * { visibility: hidden; } .print, .print * { visibility: visible; } .print { position: fixed; // 把内容定住 left: 0; top: 0; } }
三、知识点补充
@media print -> 控制打印
- 相当于选择器，代表html所有的元素，包括html标签、body标签
body只是一个标签，如果它的子标签和该属性均具有继承性，才会继承这里所设置的属性
个人记录一哈
