针对打印的css样式控制(@media查询)
场景描述：
在实际应用程序中，往往浏览器看到的style和打印的是不同的， 浏览器看到的往往更丰富可能包括一些交互button，而打印需要，所以我们就会在打印的时候把多余的东西或隐藏掉或调整一些style。
@media print {
...
}
这样里面的样式就只会在打印的时候才会生效，不会影响浏览器的正常样式显示
javascript 接口
打开打印对话框打印当前文档.
window.print()
事件监听
beforeprint // 当相关联的文档即将打印或预览以进行打印时，将触发beforeprint事件。
afterprint // 在相关联的文档已开始打印或打印预览已关闭之后, 触发 afterprint事件。
// 事件调用addEventListener 监听
实际特殊需求
场景描述
在实际应用中，有时候往往只想打印一个页面中的某个部分，而不是整个文档。
例如：下图，只想打印第二个table。这是单纯调用window.print()就不符合要求
image.png
解决办法1
利用@media print 隐藏掉多余的内容
缺点： 对应复杂的页面，十分麻烦，难于维护， 所以不推荐
解决办法2
利用ifrme 或者window.open 新开页打印
推荐： 能实现各种打印需求。 只需要或者对应dom元素即可，还可以外层加入模板。具体实现移步到下面库
demo
html-element-print
