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


Posted in Javascript onAugust 18, 2017

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

方式一:window.print()

整体打印

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

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

局部打印

首先,在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();   
}

过滤打印区域的内容

例如

<!--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>

两种写法任选其一

分页打印

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

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

方式二、jqprint()

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

参考网址:https://3water.com/article/102230.htm

请注意!很多朋友遇到 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

<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底层打印,报安全警告,不建议使用(不支持局部打印)

这里只介绍两种方式,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery实现图片左右自动滚动示例
Sep 25 Javascript
jquery统计复选框选中示例
Nov 05 Javascript
实现图片预加载的三大方法及优缺点分析
Nov 19 Javascript
jQuery实现图片上传和裁剪插件Croppie
Nov 29 Javascript
第五章之BootStrap 栅格系统
Apr 25 Javascript
AngularJS教程之简单应用程序示例
Aug 16 Javascript
Angular Module声明和获取重载实例代码
Sep 14 Javascript
AngularJS 应用身份认证的技巧总结
Nov 07 Javascript
AngularJS自定义指令详解(有分页插件代码)
Jun 12 Javascript
支付宝小程序tabbar底部导航
Nov 06 Javascript
浅谈Vue.js之初始化el以及数据的绑定说明
Nov 14 Javascript
js实现计算器功能
Aug 10 Javascript
简单实现jQuery轮播效果
Aug 18 #jQuery
JavaScript编写的网页小游戏,很给力
Aug 18 #Javascript
ReactJs实现树形结构的数据显示的组件的示例
Aug 18 #Javascript
基于 Vue 的树形选择组件的示例代码
Aug 18 #Javascript
简单实现jQuery手风琴效果
Aug 18 #jQuery
JavaScript中Hoisting详解 (变量提升与函数声明提升)
Aug 18 #Javascript
JavaScript实现旋转轮播图
Aug 18 #Javascript
You might like
Apache环境下PHP利用HTTP缓存协议原理解析及应用分析
2010/02/16 PHP
Php图像处理类代码分享
2012/01/19 PHP
php无限遍历文件夹示例分享
2014/03/04 PHP
浅析PHP程序设计中的MVC编程思想
2014/07/28 PHP
使用PHPExcel实现数据批量导出为excel表格的方法(必看)
2017/06/09 PHP
PHP抽象类与接口的区别实例详解
2019/05/09 PHP
Laravel 验证码认证学习记录小结
2019/12/20 PHP
jquery tools 系列 scrollable(2)
2009/09/06 Javascript
jQuery的Ajax的自动完成功能控件简要说明
2013/02/22 Javascript
超级给力的JavaScript的React框架入门教程
2015/07/02 Javascript
基于JavaScript实现一定时间后去执行一个函数
2015/12/14 Javascript
javascript实现平滑无缝滚动
2020/08/09 Javascript
深入理解jquery自定义动画animate()
2016/05/24 Javascript
JS获取当前使用的浏览器名字以及版本号实现方法
2016/08/19 Javascript
Node.js与Sails redis组件的使用教程
2017/02/14 Javascript
js通过keyCode值判断单击键盘上某个键,然后触发指定的事件方法
2017/02/19 Javascript
在vue项目中引入高德地图及其UI组件的方法
2018/09/04 Javascript
详解如何在vue项目中使用lodop打印插件
2018/09/27 Javascript
node中使用log4js4.x版本记录日志的方法
2019/08/20 Javascript
[48:56]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 VG vs KG
2018/03/31 DOTA
python字符串中的单双引
2017/02/16 Python
Django2.1集成xadmin管理后台所遇到的错误集锦(填坑)
2018/12/20 Python
将Pytorch模型从CPU转换成GPU的实现方法
2019/08/19 Python
Python3并发写文件与Python对比
2019/11/20 Python
如何使用python-opencv批量生成带噪点噪线的数字验证码
2020/12/21 Python
利用html5 file api读取本地文件示例(如图片、PDF等)
2018/03/07 HTML / CSS
canvas实现二维码和图片合成的示例代码
2018/08/01 HTML / CSS
New Balance德国官方网站:购买鞋子和服装
2019/08/31 全球购物
英国户外服装、鞋类和设备的领先零售商:Millets
2020/10/12 全球购物
Java里面如何创建一个内部类的实例
2015/01/19 面试题
单位办理社保介绍信
2014/01/10 职场文书
个人合伙协议书范本
2014/10/14 职场文书
高中生个性发展自我评价
2015/03/09 职场文书
工程资料员岗位职责
2015/04/13 职场文书
2016学习医德医风心得体会
2016/01/25 职场文书
Win11电脑显示本地时间与服务器时间不一致怎么解决?
2022/04/05 数码科技