针对打印的css样式控制(@media查询)

场景描述：

在实际应用程序中，往往游览器看到的style和打印的是不同的， 游览器看到的往往更丰富可能包括一些交互button，而打印需要，所以我们就会在打印的时候把多余的东西或隐藏掉或调整一些style。

@media print {
  ...
}

这样里面的样式就只会在打印的时候才会生效，不会影响游览器的正常样式显示

javascript 接口

打开打印对话框打印当前文档.

window.print()

事件监听

beforeprint // 当相关联的文档即将打印或预览以进行打印时，将触发beforeprint事件。afterprint // 在相关联的文档已开始打印或打印预览已关闭之后, 触发 afterprint事件。

// 事件调用addEventListener 监听

实际特殊需求

场景描述

在实际应用中，有时候往往只想打印一个页面中的某个部分，而不是整个文档。
例如：下图，只想打印第二个table。这是单纯调用window.print()就不符合要求

image.png

作者：EdmundChen
链接：https://www.jianshu.com/p/0ebb555e5d35