JS 实现局部打印和预览

最新推荐文章于 2024-05-22 15:07:14 发布

天才小小布

最新推荐文章于 2024-05-22 15:07:14 发布

阅读量6.2k

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/w410589502/article/details/52451321

版权

javascript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

我们调用浏览器的打印功能需要window.print();方法，但是会将全部页面打印出来，如果我们只需要打印部分页面，这样最简单的办法就是截取html，保留我们想打印的部分。

<!DOCTYPE html>
<html>
<head>
	<title>打印</title>
</head>
<body>
        <div class="rightBox">
		<div class="title">订单详情<a href="javascript:void(0);" class="btn btn-print">打印</a></div>
                "<!--startprint-->
                <div>需要打印的内容</div>
		<!--endprint-->
    </div>
<script type="text/javascript">
$(function(){
    /*提交审核 */
	$(".btn-print").on("click",function(){
	    preview();
	});
	
	function preview() { 
		var bdhtml=window.document.body.innerHTML;//获取当前页的html代码 
		var startStr="<!--startprint-->";//设置打印开始区域 
		var endStr="<!--endprint-->";//设置打印结束区域 
		var printHtml=bdhtml.substring(bdhtml.indexOf(startStr)+startStr.length,bdhtml.indexOf(endStr));//从标记里获取需要打印的页面 
		window.document.body.innerHTML=printHtml;//需要打印的页面 
		window.print(); 
		window.document.body.innerHTML=bdhtml;//还原界面 
		location.reload();
	} 
});     
</script>

我们只需要将我们打印的内容通过特殊的标签（html可以识别的，自定义）包裹起来就可以，截取其中的内容就是我们需要打印的部分，然后调用window.print();打印

天才小小布

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
JS 实现局部打印和预览

我们调用浏览器的打印功能需要window.print();方法，但是会将全部页面打印出来，如果我们只需要打印部分页面，这样最简单的办法就是截取html，保留我们想打印的部分。打印订单详情打印 " 需要打印的内容 $(function(){ /*提交审核 */ $(".
复制链接

扫一扫