前端网页打印window.print()

最新推荐文章于 2025-10-17 16:10:13 发布

原创

最新推荐文章于 2025-10-17 16:10:13 发布 · 3.8k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#前端

本文介绍了前端网页打印的方法，包括使用window.print()和document.execCommand('print')调用打印功能，以及如何处理打印样式，如使用打印样式表、媒介查询、内联样式和@import。同时，详细阐述了如何打印指定区域内容的三种方法，并提到了强制插入分页、设置打印布局和去除浏览器默认页眉页脚的技巧。最后，文章提供了打印方法的封装示例。

前言
print作为浏览已经比较成熟的技术可以经常被用来打印页面的部分内容，我们可以在MDN上查看到相关的简单介绍。

一、print()方法
print() 方法用于打印当前窗口的内容。调用 print() 方法会产生一个打印预览弹框，让用户可以设置打印请求。最简单的打印就是直接调用window.print()，当然用 document.execCommand('print') 也可以达到同样的效果。默认打印页面中body里的所有内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>printDemo</title>
</head>
<body>
<input type="button" value="打印此页面" onclick="printpage()" />
<div>内容</div>
<script>
function printpage() {
window.print()
}
</script>
</body>
</html>

二、打印样式
直接调用print()方法去打印网页内容，我们会发现，事先调整好的布局和样式都没法实现，那么有哪些方法可以帮助我们改善打印的用户体验呢？

【1】使用打印样式表

配置一份打印样式表print.css，引入到HTML文档，在 <link> 上加上一个 media="print" 来标识这是打印机才会应用的样式表，这样打印的时候，就会默认将该样式表应用到文档中
<link href="/path/print.css" media="print" rel="stylesheet" />

【2】使用媒介查询

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

@media print {
h1 {
font-size: 20px;
color: red;
}
}

【3】内联样式使用media属性

【4】在css中使用@import引入打印样式表

@import url("/path/print.css") print;