js打印页面指定区域内容

原创已于 2022-04-01 17:59:07 修改 · 8.4k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#js打印

于 2016-09-19 10:09:49 首次发布

javascript 专栏收录该内容

21 篇文章

订阅专栏

本文介绍了一种针对不同浏览器的网页打印设置方法，包括页眉页脚的自定义及打印预览功能。提供了两种实现方案：一种专为IE浏览器设计，另一种则适用于多种浏览器。

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

2种方式: 一种只支持IE浏览器

另一种支持各类浏览器

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title>打印设置</title>
<script language="JavaScript" type="text/javascript">
//<![CDATA[
    var hkey_root,hkey_path,hkey_key;
    hkey_root="HKEY_CURRENT_USER";
    hkey_path="\\Software\\Microsoft\\Internet Explorer\\PageSetup\\";
    //配置网页打印的页眉页脚为空 
　　//wb.ExecWB(1,1) 打开 
　　//wb.ExecWB(2,1) 关闭现在所有的IE窗口，并打开一个新窗口 
　　//wb.ExecWB(4,1) 保存网页 
　　//wb.ExecWB(6,1) 打印 
　//　wb.ExecWB(7,1) 打印预览 
　//　wb.ExecWB(8,1) 打印页面设置 
　//　wb.ExecWB(10,1) 查看页面属性 
　　//wb.ExecWB(15,1) 好像是撤销，有待确认 
　//　wb.ExecWB(17,1) 全选 
　//　wb.ExecWB(22,1) 刷新 
　//　wb.ExecWB(45,1) 关闭窗体无提示
    function pagesetup_null(){  
        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,"");
            //&b 第&p页/共&P页 &b
        }catch(e){}
    }
    //配置网页打印的页眉页脚为默认值
    function pagesetup_default(){
        try{
            var RegWsh = new ActiveXObject("WScript.Shell");
            hkey_key="header";
            RegWsh.RegWrite(hkey_root+hkey_path+hkey_key,"&w&b页码，&p/&P")
            hkey_key="footer";
            RegWsh.RegWrite(hkey_root+hkey_path+hkey_key,"&u&b&d");
        }catch(e){}
    }  
    
    //打印页面预览
    function printpreview(){
        pagesetup_null();
        //wb.printing.header = "居左显示&b居中显示&b居右显示页码，第&p页/共&P页";
        //wb.printing.footer = "居左显示&b居中显示&b居右显示页码，第&p页/共&P页";
        try{
            wb.execwb(7,1);
        }catch(e){
            alert("您的浏览器不支持此功能,请选择'文件'->'打印预览'");
        }
    }
    //打印
    function prints(){
        pagesetup_null();
        //wb.printing.header = "居左显示&b居中显示&b居右显示页码，第&p页/共&P页";
        //wb.printing.footer = "居左显示&b居中显示&b居右显示页码，第&p页/共&P页";
        try{
            wb.execwb(6,1);
        }catch(e){
            alert("您的浏览器不支持此功能");
        }
    }
  //]]>
  
   //打印选区内容  包含在 对应标识里面的内容为打印内容
    function doPrint() {
        bdhtml=window.document.body.innerHTML; //获取当前页的html代码
        sprnstr="<!--startprint-->"; //设置打印开始区域 
        eprnstr="<!--endprint-->";  //设置打印结束区域 
        prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17);  //从开始代码向后取html 
        prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));  //从结束代码向前取html 
        window.document.body.innerHTML=prnhtml;
        window.print();
		window.document.body.innerHTML=bdhtml;    //还原页面
    }
  </script>
<style type="text/css">
body {
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    width: 980px;
}
@media print {
	.Noprint {
		display: none;
	}
}
</style>
</head>
 
<body>
<div id="bankwrap">
  <!--这种方式 适用于 IE浏览器-->	
  <object classid="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2" id="wb" width="0" height="0">
  </object>
  <div>
    <p class="Noprint">
	<span style="cursor:pointer; color:#0000FF" onclick="printpreview();">打印预览</span> 
	<span style="cursor:pointer; color:#0000FF" onclick="prints();" class="Noprint">打印</span>
	<span style="cursor:pointer; color:#0000FF" onclick="doPrint();" >打印指定区域页面</span>
	</p>
  </div>
  <h1>打印的内容（上面一行字只显示，不打印）</h1>
  <div>撒大事大是打算打谁说的</div>
  <!--startprint-->
	<div class="banktitle"> 2016-10-01放假安排:<br />
	<img src="chishi.gif"/><br/>
	连续放假2礼拜。<br />
   </div>
	<!--endprint-->
</div>
</body>
</html>