JS页面打印

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

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

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

2.局部打印：

页面如下

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

js如下

1 function doPrint() {   
2     var bdhtml=window.document.body.innerHTML;   
3     var printstart="<!--printstart-->";   
4     var printend="<!--printend-->";   
5     prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17 ,bdhtml.indexOf(eprnstr));   
6     window.document.body.innerHTML=prnhtml;  
7     window.print();   
8 }

原理就是将不需要打印的内容手动去除，然后调用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

JS页面打印

推荐阅读