js实现页面打印

最新推荐文章于 2024-08-05 15:09:20 发布

借物小人

最新推荐文章于 2024-08-05 15:09:20 发布

阅读量1.2w

点赞数 1

分类专栏： javascript 文章标签： js实现页面打印

本文链接：https://blog.csdn.net/u012894692/article/details/82791660

版权

javascript 专栏收录该内容

7 篇文章 2 订阅

订阅专栏

文章目录

window.print()
document.execCommand("print")
iframe中打印
JQuery插件
HttpPrinter打印控件
打印预览

js有多种方式实现打印

window.print()

window.print();会弹出打印对话框，打印的是window.document.body.innerHTML中的内容,但是iframe中无法使用需要用 document.execCommand(“print”)

	<body>
		<div id="print_html">这里是要打印的html内容</div>
		<input type="button" name="button_print" value="打印" onclick="javascript:printHTML()">
		<script type="text/javascript">
			/**打印页面*/
			function printHTML(_this) {
				// 获取当前页的html代码
				var bdhtml = window.document.body.innerHTML;
				/*//设置打印开始区域
				//var startStr = '<!--startprint-->';
				// 设置打印结束区域
				//var endStr = '<!--endprint-->';
				//从标记里获取需要打印的页面
				var printHtml = bdhtml.substring(bdhtml.indexOf(startStr) + startStr.length, bdhtml.indexOf(endStr));*/
				//隐藏不必要的按钮和样式
				// 通过id获取需要打印的页面
				var printHtml = document.getElementById('print_html').innerHTML;
				// 需要打印的页面
				window.document.body.innerHTML = printHtml;
				if(!!window.ActiveXObject || "ActiveXObject" in window) { //是否ie
					remove_ie_header_and_footer();
				}
				//调用打印
				window.print();
				// 还原界面
				window.document.body.innerHTML = bdhtml;
				window.location.reload();
			}
			//去掉页眉、页脚
			function remove_ie_header_and_footer() {
				var hkey_path;
				hkey_path = "HKEY_CURRENT_USER\\Software\\Microsoft\\Internet Explorer\\PageSetup\\";
				try {
					var RegWsh = new ActiveXObject("WScript.Shell");
					RegWsh.RegWrite(hkey_path + "header", "");
					RegWsh.RegWrite(hkey_path + "footer", "");
				} catch(e) {

				}
			}
		</script>
	</body>

document.execCommand(“print”)

该方式也兼容各个版本的浏览器，同window.print()一样，其启动的是打印对话框

iframe中打印

main.html

<body>
	<button type="button" id="printBtn">打印</button>
	<iframe frameborder="0" src="" id="printFrame" style="width: 0;height: 0;"></iframe>
	<script type="text/javascript" src="./js/jquery-3.1.1.js"></script>
	<script type="text/javascript">
		$("#printBtn").click(function() {
			$("#printFrame").attr('src', './printIframe.html');
		})
	</script>
</body>

printIframe.html

	<head>
		<meta charset="UTF-8">
		<title>ifrom打印</title>
		<style type="text/css" media="print">
			html {
				height: 100%;
				width: 100%;
			}
		</style>
		<script type="text/javascript" src="./js/jquery-3.1.1.js"></script>
	</head>

	<body style="padding: 0;margin: 0;height: 100%;width: 100%;">
		<div id="printBody" style="width: 100%;height: 100%;">
			<span style="display:block;position:absolute;top:50%;left:50%;">
				我正在被打印
			</span>
		</div>
		<script type="text/javascript">
			var infoHtml = '<span style="display:block;position:absolute;top:0%;left:0%;">我正在被打印</span>';
			document.execCommand("print");
		</script>
	</body>

JQuery插件

jquery.print.js 下载地址：https://github.com/DoersGuild/jQuery.print

	<head>
		<meta http-equiv=Content-Type content="text/html; charset=utf-8">
		<title>JQuery打印</title>
		<script type="text/javascript" src="./js/jquery-3.1.1.js"></script>
		<script language="javascript" src="./js/jquery.print.js"></script>
	</head>

	<body style='margin:0 auto;'>
		<div id='ganburenmianbaio'>
			我在等待被打印
		</div>
		<button id='button_print' name='button_print' onclick="javascript:printit()">打印</button>
	</body>
	<script language="javascript">
		function printit() {
			$("#ganburenmianbaio ").print({ iframe: true, prepend: '<br/>' });
		}
	</script>

HttpPrinter打印控件

网友推荐，百度

打印预览

可以参考：https://blog.csdn.net/yongchao940/article/details/73129425
chrome浏览器、win10自带的IE浏览器调用打印弹出的打印设置界面中包含打印预览部分，故其通过上面的打印函数的调用即可实现
IE9以后的版本、火狐不支持webbrowser控件了，JS调用不了浏览器的打印预览的功能，我们只能用iframe模拟打印预览的对话框，将需要打印的内容显示在该对话框中，然后在调用打印的功能实现打印。
jquery打印预览插件下载地址：https://github.com/etimbo/jquery-print-preview-plugin