源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

JS实现页面打印(整体、局部)

  • 时间:2020-02-03 15:38 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:JS实现页面打印(整体、局部)
我们在网页开发过程中经常会有打印页面的需求,通过JS来实现的方法有很多,这里我做了一个整理,供大家参考。 [b]方式一:window.print()[/b] [b]整体打印[/b]
<a href="javascrīpt:window.print()" rel="external nofollow" target="_self">打印</a>
现在就轻松实现了页面的打印,但是这种方式会将整个页面打印,如果想要实现指定区域的打印需要通过下面的设置 [b]局部打印[/b] 首先,在html中,通过star和end来标记打印区域
<h1>这块内容不需要打印</h1>
<!--startprint-->
<div class="content">
  这里是需要打印的内容
    .....
</div>
<!--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();   
}  
[b]过滤打印区域的内容[/b] 例如
<!--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>
两种写法任选其一 [b]分页打印[/b] 使用 window.print() 打印时,如果内容超出会自动分页。但是我们如果需要自定义分页范围,如碰到表格分页打印,可以通过进行如下设置:
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="page-break-after:always" > 
</table>
[b]方式二、jqprint()[/b] jqprint是一个基于jQuery编写的页面打印的一个小插件,但是不得不承认这个插件确实很厉害,最近的项目中帮了我的大忙,在Web打印的方面,前端的打印基本是靠window.print()的方式进行打印的,而这个插件在其基础上进行了进一步的封装,可以轻松实现打印网页上的某个区域,这是个亮点。 参考网址:[url=http://www.1sucai.cn/article/102230.htm]http://www.1sucai.cn/article/102230.htm[/url] 请注意!很多朋友遇到 Cannot read property 'opera' of undefined 错误问题是juqery版本兼容问题 解决方法:加入迁移辅助插件 jquery-migrate-1.0.0.js可解决版本问题 [b]引入[/b]
<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
<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="打印"/>
[b]设置模板打印[/b]
$("#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
});
[b]附言[/b] 另外还可以使用html 标签<object>引入Webbrowser控件(只兼容IE)或者调用windows底层打印,报安全警告,不建议使用(不支持局部打印) 这里只介绍两种方式,希望对大家的学习有所帮助,也希望大家多多支持编程素材网。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部