再记js前端打印指定内容

2019-11-14 19:50:28  卢浮宫  阅读量:142  版权声明:本文为站长原创文章,转载请写明出处


一、需求变动,需要使用JS前端进行打印

    于是乎网上找了一个JS打印指定内容的资料,这里记录下。

二、处理方案说明

    ①使用startprint和endprint来标注打印区域

    ②js获取dom信息

    ③把需打印dom信息重新写入到页面

    ④切记,写完之后需要浏览器渲染,这里可以加一个延时

    ⑤针对不同浏览器进行处理

    ⑥打印

三、没什么东西,直接上代码吧

    

<html>

<head>
<meta charset="UTF-8">
<title>js打印</title>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<button onclick="doPrint()" >使用JS打印网页内容及图片</button></br>
<!--startprint-->
<img height="180px" width="390px" src="label.png">
<!--endprint-->
</body>
<script>
function doPrint() {
var bdhtml = window.document.body.innerHTML;
var sprnstr = "<!--startprint-->"; //用于截断字符串的内容,截取到指定的图片内容了
var eprnstr = "<!--endprint-->";
var prnhtml = bdhtml.substr(bdhtml.indexOf(sprnstr) + 17);
prnhtml = prnhtml.substring(0, prnhtml.indexOf(eprnstr));
window.document.body.innerHTML = prnhtml;
setTimeout(function(){
if (getExplorer() == "IE") {
pagesetup_null();
}
window.print();
window.document.body.innerHTML=bdhtml; //还原 原有页面内容;
},1000);
}

//获取浏览器类型
function getExplorer() {
var explorer = window.navigator.userAgent;
//ie
if (explorer.indexOf("MSIE") >= 0) {
return "IE";
}
//firefox
else if (explorer.indexOf("Firefox") >= 0) {
return "Firefox";
}
//Chrome
else if (explorer.indexOf("Chrome") >= 0) {
return "Chrome";
}
//Opera
else if (explorer.indexOf("Opera") >= 0) {
return "Opera";
}
//Safari
else if (explorer.indexOf("Safari") >= 0) {
return "Safari";
}
}

//IE设置去除页眉页脚
function pagesetup_null() {
var hkey_root, hkey_path, hkey_key;
hkey_root = "HKEY_CURRENT_USER";
hkey_path = "\\Software\\Microsoft\\Internet Explorer\\PageSetup\\";
try {
var RegWsh = new ActiveXObject("WScript.Shell");
hkey_key = "header";
RegWsh.RegWrite(hkey_root + hkey_path + hkey_key, "");
hkey_key = "footer";
RegWsh.RegWrite(hkey_root + hkey_path + hkey_key, "");
} catch (e) { }
}
</script>
</html>


最新评论: