网页中,打印整个页面
非常简单,直接调用 window.print()
即可,但会出现页面背景色 / 背景图片打印不出来的问题。解决方案:
/* 打印机媒体查询 */ @media print { body{ -webkit-print-color-adjust:exact; -moz-print-color-adjust:exact; -ms-print-color-adjust:exact; print-color-adjust:exact; }
其他设置:使用 @page
规则用于在打印文档时修改某些 CSS 属性。你不能用 @page
规则来修改所有的 CSS 属性,而是只能修改 margin, orphans, widow 和 page breaks of the document。对其他属性的修改是无效的。
参考引用:https://developer.mozilla.org/zh-CN/docs/Web/CSS/@page
网页中,打印页面局部内容
建议直接使用 Print.js 等插件,因为是 iframe 的方式,可能会丢失样式。
自己实现的思路:临时改变 / clone 需要被打印的 Dom 内容为需被打印内容,然后调用 window.print()
打印,之后,重新复原为原 Dom 内容 / 样式。