JS页面打印

　　平常浏览网页和文档的时候，随处可见打印两个字，有时候不小心点到或者快捷键触发到，就会弹出一个打印的页面，上边显示的打印机是GoldGrid Virtual Printer，这是计算机的虚拟打印机，打印后就会生成类似扫描件的pdf文档。当然如果连接了打印机并设置好，可以直接调用到打印机进行真实的打印。

　　接下来要介绍的是js端进行的一些打印操作：

1.直接调用window的print方法进行打印，效果同直接点击打印，会将整个页面进行打印；

2.局部打印：

页面如下

<h1>不需要打印</h1>
<!--printstart-->
<div>
  这里是需要打印的内容
    .....
</div>
<!--printend-->
<h1>不需要打印</h1>

js如下

 function doPrint() {
     var bdhtml=window.document.body.innerHTML;
     var printstart="<!--printstart-->";
     var printend="<!--printend-->";
     prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17 ,bdhtml.indexOf(eprnstr));
     window.document.body.innerHTML=prnhtml;
     window.print();
 }

原理就是将不需要打印的内容手动去除，然后调用window的打印方法打印。

3.过滤打印，与2类似，将不需要打印的内容进行隐藏，如：

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

<style type="text/css" media="print">

  .noprint{

    display: none;

  }

</style>

<!--startprint-->
<div class="content">
  <button class="noprint">预览</button>
  <button class="noprint">打印</button>
   这里是需要打印的内容
    .....
  </div>
<!--endprint-->

4.使用jqprint进行打印

下载引入jqprint后，使用时直接

$("#ddd").jqprint();

就可以，打印该id元素内的内容，很容易理解。

该方法的参数是一个对象

{

 debug: false,

 importCSS: true,

 printContainer: true,

 operaSupport: false

 }

1) debug: false,          //如果是true则可以显示iframe查看效果（iframe默认高和宽都很小，可以再源码中调大），默认是false

2) importCSS: true,       //true表示引进原来的页面的css，默认是true。（如果是true，先会找$("link[media=print]")，若没有会去找$("link")中的css文件）

3) printContainer: true,  //表示如果原来选择的对象必须被纳入打印（注意：设置为false可能会打破你的CSS规则）。

4) operaSupport: false    //表示如果插件也必须支持谷歌opera浏览器，在这种情况下，它提供了建立一个临时的打印选项卡。默认是true