在网页开发中，HTML代码本身并不能直接驱动打印机工作，而是依靠浏览器提供的打印接口，配合JavaScript来触发系统的打印流程。也就是说，我们写好的HTML页面经过浏览器渲染后，由脚本调用打印命令，浏览器再把可视内容发送给打印机或生成PDF。
一、使用window.print方法
最简单的方式是调用JavaScript的window.print()函数，它会打开浏览器的打印对话框。我们可以在按钮的点击事件中执行它。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>打印示例</title> </head> <body> <p>这是要打印的内容</p> <button onclick="window.print()">打印本页</button> </body> </html>
二、通过打印样式控制输出
有时页面上有导航栏或按钮，不希望它们出现在纸张上。可以使用媒体查询@media print来隐藏这些元素。
/* 屏幕显示正常 */
.nav, .btn {
display: block;
}
/* 打印时隐藏 */
@media print {
.nav, .btn {
display: none;
}
}
三、局部打印的实现
如果只想打印某一部分，而不是整个页面，可以动态创建iframe，把指定HTML写进去再调用打印。
function printSection(htmlContent) {
var frame = document.createElement('iframe');
frame.style.display = 'none';
document.body.appendChild(frame);
frame.contentDocument.open();
frame.contentDocument.write('<html><body>' + htmlContent + '</body></html>');
frame.contentDocument.close();
frame.contentWindow.focus();
frame.contentWindow.print();
document.body.removeChild(frame);
}
// 调用示例
// printSection(document.getElementById('report').innerHTML);
四、常见问题说明
- 打印预览空白：一般是样式未加载或内容在iframe中未写完就调用print。
- 分页失控：可用CSS的
page-break-before等属性控制。 - 跨浏览器差异：Chrome和Safari对打印支持较好，旧版IE需注意API兼容。
注意，HTML里的<input>、<select>等表单元素在打印时可能不会显示用户输入值，需要提前用文本替换或借助打印样式处理。
小结
HTML代码运行打印机的核心就是借助浏览器引擎与window.print能力，再配合打印CSS和局部输出技巧，便能稳定实现网页打印需求。
HTMLJavaScriptwindow_print打印功能前端开发修改时间：2026-07-25 13:39:18