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

巴特西

JS页面打印

最新文章

热门文章