1. Browser
  2. Javascript
  3. js-页面打印功能实现

js-页面打印功能实现

发布时间:2016-03-16 浏览次数:3351 文章来源:个人博客

有时候需要打印网页的整个页面，或者打印页面局部的需要，所以可以通过JS或者CSS等去实现打印页面。


一、普通打印（整页打）
这个不用多说，直接用

引用:

window.print();



二、打印网页内部分内容（自定义）

分三种方法实现
1、用css控制

引用:

@media print
.a {display:block}
.b {display:hidden}


把你不想打印的部分class设为b
首先在网页中添加：
      

引用:

<OBJECT id="WebBrowser" height="0" width="0" classid="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2" VIEWASTEXT></OBJECT>


然后就可以依次加入功能按钮了：

引用:

<input  type="button" value="打印">
<input  type="button" value="直接打印">
<input  type="button" value="页面设置">
<input  type="button" value="打印预览">
<INPUT type="button" value="关闭窗口" >


将这两块东西放到<center class=noprint></center>就不会打印这些按钮了。当然要定义noprint了：
<style media="print">.Noprint { DISPLAY: none }</style>只要把不想打印的东西的css设置成noprint就可以了。


现在就实现了基本的web打印，需要注意的情况如下：
a. 必须将ie的internet选项的安全设置中对于没有标记为安全的ActiveX控件进行...设置成提示或者启用，否则会报错，导致不可用。 
b. 如果在vs.net编辑环境下编辑该页面，它经常自动的给object添加多余的参数，有了这些东西，打印就会出错，所以要记得最后保存的时候删除它们。 

2、用javascript打印固定标签内的内容



a、在页面的代码头部处加入JavaScript：

引用:

<script language=javascript>
function doPrint() { 
    bdhtml=window.document.body.innerHTML; 
    sprnstr="<!--startprint-->"; 
    eprnstr="<!--endprint-->"; 
    prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17); 
    prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr)); 
    window.document.body.innerHTML=prnhtml; 
    window.print(); 
}
</script>


--------------------------------------------------------------------------------------------------------------------------------


JS 弹出新窗口实现打印功能（支持FIREFOX）

function doPrint() {  
    bdhtml=window.document.body.innerHTML;  
    sprnstr="<!--startprint-->";  
    eprnstr="<!--endprint-->";  
    prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17);  
    prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));  
    OpenWindow = window.open("");  
    OpenWindow.document.write("<HTML>"); 
    OpenWindow.document.write("<HEAD>"); 
    OpenWindow.document.write("<meta http-equiv=\"Content-Type\" content=\"text\/html; charset=utf-8\" \/>"); 
    OpenWindow.document.write("<TITLE>PrintPage<\/TITLE>"); 
    // 这里写你的CSS地址 
    OpenWindow.document.write("<link rel=\"stylesheet\" type=\"text/css\" href=\"css/main.css\">"); 
    OpenWindow.document.write("<\/HEAD>"); 
    OpenWindow.document.write("<BODY>"); 
    OpenWindow.document.write("< id=p>"); 
    OpenWindow.document.write("<\/>"); 
    OpenWindow.document.write("<\/BODY>"); 
    OpenWindow.document.write("<\/HTML>"); 
    OpenWindow.document.getElementById("p").innerHTML=prnhtml;  
    OpenWindow.document.close(); 
    OpenWindow.print();  
}

--------------------------------------------------------------------------------------------------------------------------------

2、在页面正文处加上<!--startprint-->与<!--endprint-->标识。

也就是在需要用户打印保存的正文所对应的html处附加上。同时，如果采用小偷程序获得远程数据并需打印，可将此等数据置于该定义标签之内即可。


3、截取内容部分已完成，现在加个“打印”的链接：

XML/HTML代码 
<a href="javascript:;" onClick="doPrint()">打印</a>

引用:

<script language="JavaScript">
    var hkey_root,hkey_path,hkey_key
    hkey_root="HKEY_CURRENT_USER"
    hkey_path="\\Software\\Microsoft\\Internet Explorer\\PageSetup\\"
    //设置网页打印的页眉页脚为空
    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,"")
        }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){}
        }
</script>
<input type="button" value="清空页码" onclick=pagesetup_null()>
<input type="button" value="恢复页码" onclick=pagesetup_default()>


复制出去，看下效果就可以了

（四）使用外部控件/方法实现多功能打印

1、IEWebBrowser组件

介绍
http://support.microsoft.com/default.aspx?scid=kb%3BEN-US%3BQ267240#top
http://support.microsoft.com/kb/q247671/#appliesto

代码


引用:

<OBJECT classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 height=0 id=WebBrowser width=0></OBJECT>    
<input name=Button onClick=document.all.WebBrowser.ExecWB(1,1) type=button value=打开>  
<input name=Button onClick=document.all.WebBrowser.ExecWB(2,1) type=button value=关闭所有>  
<input name=Button onClick=document.all.WebBrowser.ExecWB(4,1) type=button value=另存为>    
<input name=Button onClick=document.all.WebBrowser.ExecWB(6,1) type=button value=打印>  
<input name=Button onClick=document.all.WebBrowser.ExecWB(6,6) type=button value=直接打印>  
<input name=Button onClick=document.all.WebBrowser.ExecWB(7,1) type=button value=打印预览>  
<input name=Button onClick=document.all.WebBrowser.ExecWB(8,1) type=button value=页面设置>  
<input name=Button onClick=document.all.WebBrowser.ExecWB(10,1) type=button value=属性>  
<input name=Button onClick=document.all.WebBrowser.ExecWB(17,1) type=button value=全选>  
<input name=Button onClick=document.all.WebBrowser.ExecWB(22,1) type=button value=刷新>  
<input name=Button onClick=document.all.WebBrowser.ExecWB(45,1) type=button value=关闭>



2、使用ScriptX.cab控件


1．下载ScriptX.cab控件

官网http://www.meadroid.com/scriptx/index.asp

2．使用object元素，修改codebase，classid的值

这里调用控件ScriptX.cab 

代码


引用:


<OBJECT id="factory" style="DISPLAY: none" codeBase="${rootUrl}js/smsx.cab#VVersion=6,3,435,20"  classid="clsid:1663ed61-23eb-11d2-b92f-008048fdd814" viewastext></OBJECT>  

这段代码用来加载cab文件，clsid和codebase必须要和你下载的cab中的信息对应，否则组件会加载错误，这两项其实不难找，只要你用winrar打开你下载的cab文件，然后找到扩展名是.inf的文件，然后打开之，就能看到了。

3．调用控件脚本

Print.js文件 
代码



引用:

function setPrintBase(headerText,footerText,rootUrl) {  
  
    // -- advanced features  ，未曾使用过，有待确认。  
  
        //factory.printing.SetMarginMeasure(2); // measure margins in inches  
  
        //factory.SetPageRange(false, 1, 3);// need pages from 1 to 3  
  
        //factory.printing.printer = "HP DeskJet 870C";  
  
        //factory.printing.copies = 2;  
  
        //factory.printing.collate = true;  
  
        //factory.printing.paperSize = "A4";  
  
        //factory.printing.paperSource = "Manual feed"  
  
  var header = (headerText==null||headerText=="")?'默认页眉':headerText;  
  
  var footer = (footerText==null||footerText=="")?'默认页角':footerText;  
  
  factory.printing.header = "&b"+header+"&b" ;  
  
  factory.printing.footer = "&b"+footer;  
  
  factory.printing.portrait = true;  
  
  factory.printing.leftMargin =10.00;  
  
  factory.printing.topMargin =10.00;  
  
  factory.printing.rightMargin =10.00;  
  
  factory.printing.bottomMargin =10.00;  
  
}

 


例子



引用:

<html>  
<head>  
<meta http-equiv="imagetoolbar" c>  
<script language="javascript" src="print.js"></script>  
<style media="print">  
.Noprint  {DISPLAY:  none;}  
</style>  
<title>打印测试</title>  
</head>  
<OBJECT id="factory" style="DISPLAY: none" codeBase="smsx.cab#VVersion=6,3,435,20"  classid="clsid:1663ed61-23eb-11d2-b92f-008048fdd814" viewastext></OBJECT>  
  
<script defer>  
function window.onload() {      
    setPrintBase('页眉','页脚');  
}  
</script>  
<body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0" marginwidth="0" marginheight="0">  
<center class="Noprint">  
<input type=button value="打印" >    
<input type=button value="页面设置" >    
<input type=button value="打印预览" >              
<input type="button" value="关闭" >  
</center>  
  <center>  
      <table width="100%" border="0" cellpadding="0" cellspacing="0">  
          <tr><td align="center"><b>内容</b></td></tr>  
      </table>  
    </center>  
</body>  
</html>


key-word
js打印 javascript打印 代码打印 打印页面

个人博客/个人空间----Powered by Reidar

琼ICP备16000518号