🖨️ 学习 - 打印网页
几年前的我 “嗯，这个功能用的比较少，呸，应该就不会用到”，没想到真的在项目中碰到了。
print 方法
// 极其简单，返回值无意义
// 将会调用游览器的打印控制面板
window.print()
监听打印
// 调用 "游览器打印控制面板" 时触发
window.addEventListener('beforeprint', function () {
// ...
})
// 当关闭 "游览器打印控制面板" 时触发
// 应该是无法获取用户点击了打印还是点击了取消（未深入研究，可能不准确）
window.addEventListener('afterprint', function () {
// ...
})
控制打印内容
默认抓取的页面内容是 “所有 display 不是 null 的元素组成网页”
可以通过 “引入打印专用 CSS” 的方式，用 display 隐藏、显示内容，来实现控制打印内容。
<!-- media="print" 标识代表这个 CSS 仅在渲染打印内容时生效，用户游览网页时不生效 -->
<link rel="stylesheet" href="./print.css" media="print">
<style media="print">
/* 打印时，隐藏页面原始内容 */
.content { display: none }
/* 打印时，将打印专用元素显示出来，PS：这个元素在网页中本来是隐藏的 */
.print { display: block }
</style>
打印单位
对于游览器友好的单位是 PX
对于打印机友好的单位时 PT
<style media="print">
/* 将所有的 PX 单位改为 PT 单位 */
.print-title {
/*font-size: 18px;*/
font-size: 18pt;
}
</style>
background 不显示
页面上的 “色块”，默认打印是不会渲染的，需要指定 color-adjust 属性才行。
.print {
background-color: red;
/* chrome 的私有属性 */
-webkit-print-color-adjust: exact;
/* CSS4 的标准属性 */
color-adjust:exact;
}
页眉和页脚
打印的网页默认会带有页眉和页脚
页脚还是非常不错的，默认自带了分页，这个想自己实现不好做
但是页眉就丑到爆炸了….
@page {
/* 隐藏页眉 */
margin-top: 0;
/* 隐藏页脚 */
/* PS：页脚最好别隐藏，挺实用的，并且隐藏后，若自定义了页眉页脚，会出现问题 */
margin-bottom: 0;
}
自定义每一页的页眉页脚
自带的页眉真的很丑，如果想替代，只有用 table 结构实现
<table>
<thead><tr><td><div>这里是页眉</div></td></tr></thead>
<tbody><tr><td><div>这里是内容</div></td></tr></tbody>
<!-- 页脚需要注意下，如果内容不够一页，则会显示在内容的下方，而不是整张纸的下方 -->
<tfoot><tr><td><div>这里是页脚</div></td></tr></tfoot>
</table>
每一页都需要显示的浮动内容
页眉和页脚还是建议用 table 结构，因为占据页面位置
这个方法是通过 position: fixed，不占据位置，会导致内容重叠
<style>
.fixed {
right:30px; top: 50%;
transform: translateY(-50%);
/* 关键属性 */
position: fixed;
}
</style>
<div class="fixed">
我是浮动的内容
</div>
换页时，截断内容
救命属性…
/* 谁被截断就给谁写上 */
div {
page-break-inside: avoid;
}
开发调试
chrome 游览器流程
- 不会触发任何事件，只是简单的将 media=”print”
- 可以先走完 ajax 之类的流程，然后等页面渲染完毕后，再切换调试即可
- 不是很准，毕竟是网页，可以仅看内容是否显示后，然后再慢慢 CTRL + P 修改样式
