JS实现页面打印（整体、局部）

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

方式一：()

整体打印

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

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

局部打印

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

< h1 >这块内容不需要打印</ h1 >
<!--startprint-->
< div class = "content" >
  这里是需要打印的内容
    .....
</ div >
<!--endprint-->
< h1 >这块内容不需要打印</ h1 >

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

function doPrint() {
    bdhtml=;
    sprnstr= "<!--startprint-->" ;
    eprnstr= "<!--endprint-->" ;
    prnhtml=((sprnstr)+17);
    prnhtml=(0,(eprnstr));
    =prnhtml;
    ();
}

过滤打印区域的内容

例如

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

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

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

or

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

两种写法任选其一

分页打印

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

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

方式二、jqprint()

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

参考网址：///article/

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

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

引入

< script language = "javascript" src = "jquery-1.4." ></ script >
< script language = "javascript" src = "-0." ></ script >

js

<script language= "javascript" >
function a(){
    $( "#ddd" ).jqprint();
  }
</script>

html

< div id = "ddd" >
  < table >
    < tr >
      < td >test</ td >
      < td >test</ td >
      < td >test</ td >
      < td >test</ td >
      < td >test</ td >
    </ tr >
  </ table >
</ div >
< input type = "button" onclick = " a()" value = "打印" />

设置模板打印

$( "#printContainer" ).jqprint({
   debug: false , //如果是true则可以显示iframe查看效果（iframe默认高和宽都很小，可以再源码中调大），默认是false
   importCSS: true , //true表示引进原来的页面的css，默认是true。（如果是true，先会找$("link[media=print]")，若没有会去找$("link")中的css文件）
   printContainer: true , //表示如果原来选择的对象必须被纳入打印（注意：设置为false可能会打破你的CSS规则）。
   operaSupport: true //表示如果插件也必须支持歌opera浏览器，在这种情况下，它提供了建立一个临时的打印选项卡。默认是true
});

附言

另外还可以使用html 标签<object>引入Webbrowser控件（只兼容IE）或者调用windows底层打印，报安全警告，不建议使用（不支持局部打印）