前端打印页面相关问题

0
发布于 (更新时间： by 博主

网页中，打印整个页面

非常简单，直接调用 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 内容 / 样式。

浏览次数: 1,948