JS代码实现页面打印的整体、局部

我们在网页开发过程中经常会有打印页面的需求，通过js来实现的方法有很多，这里我做了一个整理，供大家参考。

方式一：window.print()

整体打印

<a href="javascrīpt:window.print()" rel="external nofollow" target="_self">打印</a>

现在就轻松实现了页面的打印，但是这种方式会将整个页面打印，如果想要实现指定区域的打印需要通过下面的设置

局部打印

首先，在html中，通过star和end来标记打印区域

<h1>这块内容不需要打印</h1>

<!--startprint-->

<p class="content">

  这里是需要打印的内容

    .....

</p>

<!--endprint-->

<h1>这块内容不需要打印</h1>

然后，在点击事件中添加如下代码

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();  

}

过滤打印区域的内容

例如

<!--startprint-->

<p class="content">

  <button class="noprint">预览</button>

  <button class="noprint">打印</button>

   这里是需要打印的内容

    .....

  </p>

<!--endprint-->

上面的预览和打印按钮不希望打印，如果要过滤的话可以做下面的样式设置

<style type="text/css">

  @media print {

    .noprint{

      display: none;

    }

  }

</style>

or

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

  .noprint{

    display: none;

  }

</style>

两种写法任选其一

分页打印

使用 window.print() 打印时，如果内容超出会自动分页。但是我们如果需要自定义分页范围，如碰到表格分页打印，可以通过进行如下设置：

<table width="100%" border="0" cellpadding="0" cellspacing="0" style="page-break-after:always" >

</table>

方式二、jqprint()

jqprint是一个基于jquery编写的页面打印的一个小插件，但是不得不承认这个插件确实很厉害，最近的项目中帮了我的大忙，在web打印的方面，前端的打印基本是靠window.print()的方式进行打印的，而这个插件在其基础上进行了进一步的封装，可以轻松实现打印网页上的某个区域，这是个亮点。

请注意!很多朋友遇到 cannot read property 'opera' of undefined 错误问题是juqery版本兼容问题

解决方法：加入迁移辅助插件 jquery-migrate-1.0.0.js可解决版本问题

引入

<script language="javascript" src="jquery-1.4.4.min.js"></script>

<script language="javascript" src="jquery.jqprint-0.3.js"></script>

js

<script language="javascript">

function a(){

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

  }

</script>

html

<p id="ddd">

  <table>

    <tr>

      <td>test</td>

      <td>test</td>

      <td>test</td>

      <td>test</td>

      <td>test</td>

    </tr>

  </table>

</p>

<input type="button" onclick=" a()" value="打印"/>

设置模板打印

$("#printcontainer").jqprint({

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