js实现页面打印
程序员文章站
2022-03-04 15:52:39
...
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>
打印预览
可以参考：https://blog.csdn.net/yongchao940/article/details/73129425
chrome浏览器、win10自带的IE浏览器 调用打印弹出的打印设置界面中包含打印预览部分，故其通过上面的打印函数的调用即可实现
IE9以后的版本、火狐不支持webbrowser控件了，JS调用不了浏览器的打印预览的功能，我们只能用iframe模拟打印预览的对话框，将需要打印的内容显示在该对话框中，然后在调用打印的功能实现打印。
jquery打印预览插件下载地址：https://github.com/etimbo/jquery-print-preview-plugin
上一篇： js 简单页面打印
下一篇： ININ服务器管理 for 管理员