本文整理了JavaScript实现网页打印的两种常用方式。第一种利用原生window.print()配合HTML注释标记或CSS媒体查询实现局部打印与样式过滤；第二种介绍基于jQuery的jqprint插件，封装了更灵活的打印配置。文中还涵盖了分页控制、版本兼容问题及常见错误排查，帮助开发者根据需求选择合适方案。
引言
在Web开发中，实现页面打印是常见需求。本文梳理了几种通过JavaScript实现打印的方法，供开发者参考。
原生方法：window.print()
方法一：使用 window.print()
整体打印
<a href="javascrīpt:window.print()" rel="external nofollow" target="_self">打印</a>调用此方法可快速实现页面打印，但默认会打印整个网页。若需指定特定区域进行打印，需配合后续设置。
局部打印
首先，在HTML结构中通过特定的注释标签来界定打印区域的起始和结束位置。
<h1>这块内容不需要打印</h1>
<!--startprint-->
<div class="content">
这里是需要打印的内容
.....
</div>
<!--endprint-->
<h1>这块内容不需要打印</h1>接着，在触发打印的点击事件中添加相应的JavaScript代码。
function doPrint() {
bdhtml=window.document.body.innerHTML;
sprnstr="<!--startprint-->";
eprnstr="<!--endprint-->";
prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17);
prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));
window.document.body.innerHTML=prnhtml;
window.print();
} 该步骤旨在过滤掉打印区域外的无关内容。
具体示例如下：
<!--startprint-->
<div class="content">
<button class="noprint">预览</button>
<button class="noprint">打印</button>
这里是需要打印的内容
.....
</div>
<!--endprint-->如果页面上存在预览或打印按钮等无需打印的元素，可通过CSS样式将其隐藏。
<style type="text/css">
@media print {
.noprint{
display: none;
}
}
</style>或者
<style type="text/css" media="print">
.noprint{
display: none;
}
</style>上述两种CSS写法任选其一即可生效。
分页打印
使用 window.print() 时，浏览器会自动处理内容超出的分页。若需自定义分页范围，例如处理表格分页打印，可通过添加特定CSS属性实现：
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="page-break-after:always" >
</table>插件方案：jqprint
方法二：使用 jqprint() 插件
jqprint 是一款基于 jQuery 开发的轻量级打印插件。尽管前端打印主要依赖 window.print()，但该插件在此基础上进行了封装，能够更轻松地实现网页特定区域的打印，这是一个显著优势。
参考链接：https://www.jb51.net/article/102230.htm
注意：许多用户在使用时遇到 Cannot read property 'opera' of undefined 错误，这通常是由于 jQuery 版本兼容性问题导致的。
解决方案：引入迁移辅助插件 jquery-migrate-1.0.0.js 即可解决版本兼容问题。
引入依赖
<script language="javascript" src="jquery-1.4.4.min.js"></script>
<script language="javascript" src="jquery.jqprint-0.3.js"></script>JavaScript 代码
<script language="javascript">
function a(){
$("#ddd").jqprint();
}
</script>
HTML 结构
<div id="ddd">
<table>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
</table>
</div>
<input type="button" onclick=" a()" value="打印"/>
设置模板打印
$("#printContainer").jqprint({
debug: false, //如果是true则可以显示iframe查看效果（iframe默认高和宽都很小，可以再源码中调大），默认是false
importCSS: true, //true表示引进原来的页面的css，默认是true。（如果是true，先会找$("link[media=print]")，若没有会去找$("link")中的css文件）
printContainer: true, //表示如果原来选择的对象必须被纳入打印（注意：设置为false可能会打破你的CSS规则）。
operaSupport: true//表示如果插件也必须支持歌opera浏览器，在这种情况下，它提供了建立一个临时的打印选项卡。默认是true
});其他替代方案与总结
补充说明
此外，还可以利用 HTML 的 <object> 标签引入 Webbrowser 控件（仅兼容 IE 浏览器）或直接调用 Windows 底层打印接口。后者会触发安全警告，且不支持局部打印，因此不建议采用。
本文仅介绍了上述两种主要方式，希望能对各位的学习和工作有所帮助，也欢迎大家继续支持本站。