html 打印 从入门到深入

针对打印的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