window.print()，完整用法说明文档，如何打印出样式规范的页面
window.print()，完整用法说明文档，如何打印出样式规范的页面
一、测试地址
代码测试 🔗
二、用法详情
window.print() 完整用法及规范打印指南
一、window.print() 基础用法
// 基本调用方式
window.print(); // 触发浏览器打印对话框// 结合按钮使用示例
<button onclick="window.print()">打印当前页</button>
- 功能：打开浏览器打印预览对话框，默认打印整个页面内容（
<body>内的所有元素） - 返回值：无返回值（
undefined） - 兼容性：所有现代浏览器（Chrome/Firefox/Safari/Edge）均支持
二、实现规范打印的关键技术
- CSS 打印媒体查询（核心）
/* 常规屏幕样式 */
body { font-size: 16px; }/* 专属打印样式 */
@media print {.no-print { display: none; /* 隐藏不需要打印的元素 */}body {margin: 0; /* 清除默认边距 */padding: 1cm; /* 设置打印内边距 */}h1 { color: black !important; /* 强制黑色文字 */page-break-after: avoid; /* 防止标题分页 */}.page-break {page-break-before: always; /* 强制分页 */}
}
- 分页控制属性
/* 避免表格跨页断开 */
table { page-break-inside: avoid; }/* 段落保持完整 */
p { page-break-inside: avoid; }/* 章节前强制分页 */
.chapter { page-break-before: always; }
- 打印指定区域
function printElement(elementId) {const printContent = document.getElementById(elementId).innerHTML;const originalBody = document.body.innerHTML;document.body.innerHTML = printContent;window.print();document.body.innerHTML = originalBody; // 恢复原始内容
}
三、完整实现示例
<!DOCTYPE html>
<html>
<head><style>@media print {header, footer, .action-buttons {display: none;}body {padding: 2cm;font-size: 12pt;}.watermark {position: fixed;opacity: 0.2;font-size: 80pt;transform: rotate(-45deg);}}.page-break {page-break-after: always;}</style>
</head>
<body><header>网站标题（不打印）</header><div id="print-area"><h1>正式文档标题</h1><div class="watermark">机密文件</div><p>第一页内容...</p><div class="page-break"></div> <!-- 分页符 --><p>第二页内容...</p></div><footer>页脚信息（不打印）</footer><button onclick="window.print()">打印整个页面</button><button onclick="printElement('print-area')">仅打印内容区</button><script>function printElement(elementId) {const content = document.getElementById(elementId);const win = window.open('', '_blank');win.document.write(content.innerHTML);win.document.close();win.focus();win.print();win.close();}</script>
</body>
</html>
四、常见问题解决方案
| 问题类型 | 解决方案 |
|---|---|
| 打印背景色 | -webkit-print-color-adjust: exact; |
| 页眉/页脚去除 | 浏览器打印设置中取消页眉页脚 |
| 内容截断 | 检查元素是否设置了固定高度 |
| 多页重复表头 | <thead>标签内定义表头 |
| 图片不清晰 | 使用SVG或2倍分辨率位图 |
五、最佳实践建议
- 布局简化：打印时使用单列布局，移除浮动和复杂定位
- 单位选择：使用
cm、mm或pt等印刷单位 - 字体规范：
- 正文字体 ≥ 12pt
- 优先选择衬线字体（如宋体、Times New Roman）
- 颜色控制：
@media print {* {background: white !important;color: black !important;box-shadow: none !important;} }
完整文档参考：
MDN window.print() 文档
W3C CSS Paged Media 标准