页面打印

最新推荐文章于 2025-07-14 21:53:33 发布

周同学_web

最新推荐文章于 2025-07-14 21:53:33 发布

阅读量185

点赞数

CC 4.0 BY-SA版权

文章标签：前端 javascript jquery

本文链接：https://blog.youkuaiyun.com/zhouhouyong_web/article/details/105966709

本文介绍了一种使用HTML和jQuery实现页面指定区域打印的方法。通过设置打印开始和结束的注释标签，可以精确控制打印的内容范围，同时提供了示例代码和调用方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

页面打印

html

<!-- 业入驻申请模板|start -->
						<div id="preview" style="display: none;">
							<!--startprint-->
							<div class="print-box">这里面内容自己代码</div>
							<!--endprint-->
						</div>
						<!-- 业入驻申请模板|end -->

jquery

	preview();方法调用
	
	function preview() {
	var bdhtml = $("#preview").html();
	sprnstr="<!--startprint-->";//设置打印开始区域
    eprnstr="<!--endprint-->";//设置打印结束区域
	var prnhtml=bdhtml.substring(bdhtml.indexOf(sprnstr)); //从开始代码向后取html
    var prnhtml=bdhtml.substring(-2,prnhtml.indexOf(eprnstr));//从结束代码向前取html
	var star = window.document.body.innerHTML = prnhtml;
	window.print(star);
	window.document.body.innerHTML=bdhtml;//将页面重新改回原始样式
    window.location.href=window.location.href; // 直接返回样式会乱 所以手动刷新了一下
}

如下图所示：
在这里插入图片描述