当前位置：首页 > 文章列表 > 文章 > 前端 > JS实现页面打印的5种方式！

JS实现页面打印的5种方式！

2025-06-24 16:56:10 0浏览收藏

还在为前端页面打印发愁？本文为你总结了5种JS实现页面打印的方法，助你轻松搞定！从最简单的`window.print()`到灵活的`iframe`打印，再到强大的CSS `@media print`样式控制，以及功能丰富的第三方打印库和可靠的后端PDF渲染，总有一款适合你。本文详细对比了各种方案的优缺点，并提供选择建议。同时，还分享了解决打印样式错乱、隐藏元素、分页打印、添加页眉页脚等实用技巧，助你避免踩坑，提升用户体验。无论你是前端新手还是老司机，都能从中受益！

前端打印可通过多种方案实现，1.window.print()最简单但样式受限；2.iframe打印更灵活需处理内容加载；3.CSS@media print可自定义打印样式；4.第三方库功能强但增加项目负担；5.后端渲染PDF最可靠但耦合前后端。选择方案需根据需求权衡，如简单打印用window.print()，样式控制可用iframe或CSS@media print，生成PDF则选第三方库或后端渲染。解决样式错乱可通过定义打印样式、简化CSS、跨浏览器测试等方式。隐藏元素可用.no-print类加display:none，分页打印用page-break属性控制，页眉页脚通过@page规则设置，但需注意兼容性问题。

js如何实现页面打印功能前端打印的5种实现方案！

页面打印，说白了，就是把网页内容弄到纸上。JS能搞定这事儿，而且方法还不少。下面就来聊聊前端打印的几种实现方案，不保证完美，但绝对实用。

几种实现方案：

window.print()：最简单粗暴的方式
这是JS自带的方法，调用后会直接弹出浏览器的打印对话框。优点是简单，缺点是样式控制有限，基本就是浏览器默认的打印样式。如果你对样式要求不高，或者懒得折腾，这个方法绝对够用。
iframe 打印：灵活但略复杂
创建一个隐藏的 iframe，把需要打印的内容放到 iframe 里，然后调用 iframe 的 window.print() 方法。这种方式的好处是可以自定义 iframe 里的样式，更灵活。但是，你需要处理 iframe 的创建、内容加载等问题，稍微复杂一点。
CSS @media print：样式控制的利器
通过 CSS 的 @media print 媒体查询，可以为打印页面定义专门的样式。例如，隐藏不需要打印的元素，调整字体大小，等等。这种方式配合 window.print() 使用，可以实现比较好的打印效果。
第三方打印库：功能强大但引入成本
市面上有一些专门的JS打印库，比如 jsPDF、printThis 等。这些库功能强大，可以生成PDF、自定义打印样式等。但是，引入第三方库会增加项目的复杂度和体积，需要权衡利弊。
后端渲染PDF：最可靠但前后端耦合
把打印内容发送到后端，由后端生成PDF文件，然后前端下载PDF打印。这种方式最可靠，可以保证打印效果的一致性。但是，需要后端配合，前后端耦合度较高。

如何选择合适的打印方案？

选择哪种方案，取决于你的具体需求。如果只是简单打印，window.print() 就够了。如果需要自定义样式，可以考虑 iframe 打印或 CSS @media print。如果需要生成PDF，或者对打印效果有极高的要求，可以考虑第三方打印库或后端渲染PDF。

如何解决打印样式错乱的问题？

打印样式错乱是前端打印常见的问题。原因有很多，比如浏览器兼容性问题、CSS样式冲突等。解决这个问题，可以尝试以下方法：

使用 CSS @media print 定义打印样式：这是最有效的方法。
避免使用复杂的CSS样式：尽量使用简单的CSS样式，减少浏览器解析的负担。
测试不同浏览器的打印效果：确保在主流浏览器上打印效果一致。
使用第三方打印库：一些打印库对打印样式有更好的支持。

如何隐藏不需要打印的元素？

有时候，我们只需要打印页面的一部分内容，而不是全部。可以使用 CSS 的 display: none; 或 visibility: hidden; 属性来隐藏不需要打印的元素。但是，要注意 display: none; 会完全移除元素，而 visibility: hidden; 只是隐藏元素，但仍然占据空间。

@media print {
  .no-print {
    display: none;
  }
}

在需要隐藏的元素上添加 no-print 类即可。

如何实现分页打印？

如果页面内容过多，需要分页打印。可以使用 CSS 的 page-break-before 和 page-break-after 属性来控制分页。

.page-break {
  page-break-before: always; /* 在元素之前分页 */
  /* page-break-after: always;  在元素之后分页 */
}

在需要分页的元素上添加 page-break 类即可。注意，分页效果可能受到浏览器和打印机的影响，需要进行测试。

如何在打印页眉页脚添加内容？

在打印页眉页脚添加内容，可以使用 CSS 的 @page 规则。

@page {
  @top-left {
    content: "页眉左侧内容";
  }
  @top-right {
    content: "页眉右侧内容";
  }
  @bottom-left {
    content: "页脚左侧内容";
  }
  @bottom-right {
    content: "页脚右侧内容";
  }
}

这种方式可以自定义页眉页脚的内容，但是兼容性可能存在问题，需要进行测试。

总而言之，前端打印是一个比较繁琐的事情，需要根据具体情况选择合适的方案，并进行充分的测试。希望这些方案能帮助你解决前端打印的问题。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《JS实现页面打印的5种方式！》文章吧，也可关注golang学习网公众号了解相关技术文章。