引言
在前端开发中，打印功能是一个常见的需求，但不同浏览器对打印样式的支持差异较大，尤其是页眉页脚的控制。现代浏览器支持 @page 规则进行打印控制，但低版本浏览器（如 IE9-11、旧版 Firefox/Safari）可能无法正确应用这些样式。本文将深入探讨 使用 iframe 打印 的方法，分析其原理、兼容性优势，并提供完整的实现方案。
1. 为什么需要 iframe 打印
1.1 浏览器打印的痛点
页眉页脚难以控制：浏览器默认会添加 URL、页码、日期等页眉页脚信息，@page 规则在现代浏览器中可以隐藏它们，但旧版浏览器支持有限。
样式污染：主页面复杂的 CSS 和 JavaScript 可能干扰打印效果。
兼容性问题：低版本浏览器（如 IE9-10）可能无法正确解析 @page 规则。
1.2 iframe 打印的优势
隔离的打印环境：iframe 提供了一个全新的文档上下文，不受主页面样式影响。
更稳定的打印控制：即使 @page 不被支持，仍可通过 margin: 0 等方式优化打印效果。
兼容性更好：在旧版 IE、Firefox 等浏览器中表现更稳定。
2. iframe 打印的实现原理
2.1 基本思路
动态创建 iframe，并设置 display: none 或 width: 0; height: 0 避免影响页面布局。
将打印内容写入 iframe，并应用专门的打印样式。
调用 iframe.contentWindow.print() 触发打印。
打印完成后移除 iframe，避免内存泄漏。
2.2 关键代码实现
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | const printWithIframe = (content: HTMLElement) => { // 1. 创建 iframe const iframe = document.createElement("iframe"); iframe.style.position = "absolute"; iframe.style.width = "0"; iframe.style.height = "0"; iframe.style.border = "none"; document.body.appendChild(iframe); // 2. 获取 iframe 的 document const iframeDoc = iframe.contentDocument || iframe.contentWindow?.document; if (!iframeDoc) return; // 3. 写入打印内容 iframeDoc.open(); iframeDoc.write(` <title>打印文档</title> /* 现代浏览器支持 @page 隐藏页眉页脚 */ @page { size: auto; margin: 0; } /* 旧浏览器仍可通过 body margin 优化 */ body { margin: 0 !important; padding: 0 !important; } ${content.innerHTML} `); iframeDoc.close(); // 4. 触发打印 setTimeout(() => { iframe.contentWindow?.focus(); iframe.contentWindow?.print(); // 5. 打印完成后移除 iframe document.body.removeChild(iframe); }, 100);}; |
3. iframe 打印如何控制页眉页脚
3.1 现代浏览器（Chrome/Firefox/Edge）
@page { margin: 0; }：直接移除页边距，隐藏默认页眉页脚。
@page :header, :footer { display: none; }（部分支持）：显式隐藏页眉页脚。
3.2 低版本浏览器（IE9-11、旧版 Safari）
body { margin: 0; }：虽然没有 @page 支持，但减少 margin 能最小化页眉页脚的显示区域。
padding: 0：避免内容被页眉页脚遮挡。
3.3 物理尺寸优化（针对打印机）
1 2 3 4 5 | body { width: 210mm; /* A4 宽度 */ height: 297mm; /* A4 高度 */ margin: 0;} |
某些旧版浏览器对 mm 单位支持更好，可确保打印尺寸正确。
4. 兼容性对比
| 方法 | Chrome/Firefox | IE11 | IE9-10 | Safari (旧版) |
|---|---|---|---|---|
| 直接 window.print() |  支持 @page |
 部分支持 |
 不支持 |
部分支持 |
| iframe 打印 | 完美支持 |
更稳定 |
可用 |
更稳定 |
结论：
现代浏览器：@page + iframe 提供最佳效果。
旧版浏览器：iframe + margin: 0 仍能优化打印效果。
5. 完整 Vue3 + TypeScript 实现
5.1 组件封装
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | <div> <div> <h1>打印标题</h1> <p>这里是打印内容...</p> </div> <button>打印</button> </div>import { ref } from "vue";export default { setup() { const printContent = ref(null); const printWithIframe = () => { if (!printContent.value) return; const iframe = document.createElement("iframe"); iframe.style.position = "absolute"; iframe.style.width = "0"; iframe.style.height = "0"; iframe.style.border = "none"; document.body.appendChild(iframe); const iframeDoc = iframe.contentDocument || iframe.contentWindow?.document; if (!iframeDoc) return; iframeDoc.open(); iframeDoc.write(` @page { margin: 0; } body { margin: 0 !important; padding: 0 !important; } ${printContent.value.innerHTML} |
