😎 作者介绍：我是程序员洲洲，一个热爱写作的非著名程序员。CSDN全栈优质领域创作者、华为云博客社区云享专家、阿里云博客社区专家博主。 🤓 同时欢迎大家关注其他专栏，我将分享Web前后端开发、人工智能、机器学习、深度学习从0到1系列文章。 🌼 同时洲洲已经建立了程序员技术交流群，如果您感兴趣，可以私信我加入社群，可以直接vx联系（文末有名片）v：bdizztt 🖥 随时欢迎您跟我沟通，一起交流，一起成长、进步！点此也可获得联系方式~

在前端开发中，有时我们需要提供打印网页内容的功能，让最终用户能够将网页上的特定部分打印成纸质文档。

虽然浏览器提供了自己的打印预览和打印功能，但使用 JavaScript 的 window.print() 方法可以更灵活地控制打印内容和样式。

本文洲洲将详细介绍如何使用 window.print() 方法实现网页打印，并提供代码示例。

在开始之前，我们需要了解基本的打印流程：

1、用户触发打印操作，这可以是一个按钮点击事件。 2、JavaScript 捕获事件并调用 window.print() 方法。 3、浏览器显示打印预览窗口，用户可以设置打印选项并打印。

print() 方法用于打印当前窗口的内容。

调用 print() 方法会产生一个打印预览弹框，让用户可以设置打印请求。

最简单的打印就是直接调用window.print()，当然用 document.execCommand(‘print’) 也可以达到同样的效果。

默认打印页面中body里的所有内容。

比方说我们用上面的代码，进行一个简单的尝试： 但是这样会存在一定的问题，那就是直接调用print()方法去打印网页内容，事先调整好的布局和样式都没法实现，所以有哪些方法可以帮助我们改善打印的用户体验呢？

配置一份打印样式表print.css，引入到HTML文档，在 上加上一个 media=“print” 来标识这是打印机才会应用的样式表，这样打印就会默认将该样式表应用到文档中。

要修改的样式没有很多的时候，其实完全不需要重新写个样式表，写上一个媒介查询也可以达到同样的效果，如：

在需要打印的正文内容所对应的html开始处加上标识，结尾处加上标识，截取打印标识之间的内容替换body的内容，调用打印print()方法。

或者也可以将需要打印的内容用一个大的div包裹，打印时将body的内容替换为该div的内容，调用打印print()方法。

也可以在打印之前，我们可以使用 JavaScript 来隐藏那些不需要打印的元素。

当页眉打印默认有页眉页脚信息，展现到页面外边距范围，我们可以通过去除页面模型page的外边距，使得内容不会延伸到页面的边缘，再通过设置 body 元素的 margin 来保证 A4 纸打印出来的页面带有外边距。

在utils下新建print.js文件：

引入print文件，传入需要打印的DOM元素即可：

📝Hello，各位看官老爷们好，我已经建立了CSDN技术交流群，如果你很感兴趣，可以私信我加入我的社群。

📝社群中不定时会有很多活动，例如每周都会包邮免费送一些技术书籍及精美礼品、学习资料分享、大厂面经分享、技术讨论谈等等。

📝社群方向很多，相关领域有Web全栈（前后端）、人工智能、机器学习、自媒体副业交流、前沿科技文章分享、论文精读等等。

📝不管你是多新手的小白，都欢迎你加入社群中讨论、聊天、分享，加速助力你成为下一个大佬！

📝想都是问题，做都是答案！行动起来吧！欢迎评论区or后台与我沟通交流，也欢迎您点击下方的链接直接加入到我的交流社群！~ 跳转链接社区~