引言
在前端开发中，打印功能是一个常见的需求，但不同浏览器对打印样式的支持差异较大，尤其是页眉页脚的控制。现代浏览器支持 @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 关键代码实现
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(`
打印文档
/* 现代浏览器支持 @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 物理尺寸优化（针对打印机）
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 组件封装
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}打印标题
这里是打印内容...
