js实现局部打印及其打印预览

虽然浏览器提供了打印的功能，但是有时候需要我们自己定义打印的区域，这个时候需要JS来帮忙，以下是我找的几个打印的方法。

局部打印方法一：

function preview(oper){
 if (oper < 10){
 bdhtml=window.document.body.innerHTML;//获取当前页的html代码
 sprnstr="<!--startprint"+oper+"-->";//设置打印开始区域
 eprnstr="<!--endprint"+oper+"-->";//设置打印结束区域
 prnhtml=bdhtml.substring(bdhtml.indexOf(sprnstr)+18); //从开始代码向后取html

 prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));//从结束代码向前取html
 window.document.body.innerHTML=prnhtml;
 window.print();
 window.document.body.innerHTML=bdhtml;
 } else {
 window.print();
 }
}

使用很简单 将页面内要打印的内容加入中间XXXXX再加个打印按纽 οnclick=preview(1)

局部打印方法二：

或者使用div将需要打印的部分包裹起来后直接获取这部分

 function printdiv() {
            var newstr = document.getElementById("PrintContentDiv").innerHTML;   //获得需要打印的内容
            // alert(newstr);
            var oldstr = document.body.innerHTML;   //保存原先网页的代码
            document.body.innerHTML = newstr; //将网页内容更改成需要打印
            window.print();
            document.body.innerHTML = oldstr;   //将网页还原
            return false;
        }

另外，还有一种打印的方法，通过css+js实现局部打印。这个是调用浏览器自己的控件，不过好像只能在IE中使用。

局部打印方法三：

WebBrowser是IE内置的浏览器控件，无需用户下载. 

一、WebBrowser控件  
　　  <  object ID  =  '  WebBrowser  '   WIDTH  =  0   HEIGHT  =  0   CLASSID  =  '  CLSID:8856F961-340A-11D0-A96B-00C04FD705A2  '  ></  object  >    
 二、WebBrowder控件的方法  
  //  打印    
WebBrowser1.ExecWB(  6  ,  1  );  
  //  打印设置    
WebBrowser1.ExecWB(  8  ,  1  );  
  //  打印预览   
WebBrowser1.ExecWB(  7  ,  1  );  
关于这个组件还有其他的用法，列举如下：  
WebBrowser.ExecWB(  1  ,  1  ) 打开  
Web.ExecWB(  2  ,  1  ) 关闭现在所有的IE窗口，并打开一个新窗口  
Web.ExecWB(  4  ,  1  ) 保存网页  
Web.ExecWB(  6  ,  1  ) 打印  
Web.ExecWB(  7  ,  1  ) 打印预览  
Web.ExecWB(  8  ,  1  ) 打印页面设置  
Web.ExecWB(  10  ,  1  ) 查看页面属性  
Web.ExecWB(  15  ,  1  ) 好像是撤销，有待确认  
Web.ExecWB(  17  ,  1  ) 全选  
Web.ExecWB(  22  ,  1  ) 刷新  
Web.ExecWB(  45  ,  1  ) 关闭窗体无提示  
但是打印是会把整个页面都打印出来的,页面里面有什么东西就打印出来,我们有时候只需要打印数据表格,这时我们就要写一个样式了:把不想打印的部份隐藏起来  ：

<style type="text/css" media=print>
.noprint{display : none }
</style>

注意这个 media=print很重要，如果不写的话在页面上就会直接隐藏，写上之后只有打印的时候才会隐藏，浏览的时候还是正常显示。

然后把想隐藏的部分的class定义为noprint即可。

第三种方法最方便，但是局限性也最大，只能使用IE才有效，因为控件是IE的控件。

CSS隐藏不打印部分的方式所有浏览器通用。

以上打印方法一和打印方法三出自Sam Lin 的博客，打印方法二出自TianGaojie123abc 的博客 感谢作者