聊一聊浏览器打印 - window.print

东方睡衣

已于 2023-07-19 16:27:49 修改

阅读量1.4w

点赞数 5

文章标签： css 前端

于 2022-11-09 13:41:09 首次发布

本文链接：https://blog.youkuaiyun.com/web2022050903/article/details/127768277

版权

本文详述了浏览器的window.print()方法在前端打印中的应用，包括打印样式设置、指定区域打印、分页控制及最佳实践。通过示例介绍了如何在React中优雅地实现打印功能，以及如何处理打印分页问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

一般信息填写类的需求页面，都会增设「预览」和「打印」功能。我们会通过编写 DOM 及样式来绘制出预览视图，而打印则是基于预览来生成 PDF 文件。

浏览器原生 API window.print() 可以用于打印当前窗口（window.document）视图内容。调用此方法会产生一个打印预览弹框，用户可以根据具体设置来得到打印结果。

接下来将从 code 层面带领大家熟悉「打印」的使用。

一、打印样式

默认情况下，基于页面上的内容，会将元素，布局和样式都进行打印；

如果仅想在打印上设置特殊样式，可以通过以下方式：

1.使用打印样式表：

<link href="print.css" media="print" rel="stylesheet" />

2.使用媒介查询：

@media print {p{color: lavender;background: #ccc;}h1{color: lightblue;background: #ccc;}
}

3.使用内联 media 属性

<style media="print"> p{color: lavender;background: #ccc;}h1{color: lightblue;background: #ccc;} </style>

默认情况下，元素的背景色不会被打印，可通过设置属性来支持：

div{// Chrome、Safari 等 webkit 浏览器内核-webkit-print-color-adjust: exact;// 火狐print-color-adjust: exact;color-adjust: exact;
}

二、打印指定区域内容

默认情况下，调用 window.print() 会对整个 document.body 进行打印，当需要打印指定容器内容时，可以通过以下几种方式：

1. 对容器进行打印

<body><div id="container"><p>这是一个段落</p><h1>这是一个标题</h1></div><input type="button" value="打印此页面" onclick="printpage()" /><script> const printpage = () => {let newstr = document.getElementById("container").innerHTML;let oldstr = document.body.innerHTML;document.body.innerHTML = newstr;window.print();document.body.innerHTML = oldstr;} </script>
</body>