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 submit()无法提交问题
Apr 21 Javascript
使用js判断控件是否获得焦点
Jan 03 Javascript
ie8本地图片上传预览示例代码
Jan 12 Javascript
JavaScript文本框脚本编写的注意事项
Jan 25 Javascript
用canvas 实现个图片三角化(LOW POLY)效果
Feb 18 Javascript
js实现抽奖效果
Mar 27 Javascript
详解用vue编写弹出框组件
Jul 04 Javascript
jQuery中过滤器的基本用法示例
Oct 11 jQuery
Vue cli+mui 区域滚动的实例代码
Jan 25 Javascript
Vuejs 2.0 子组件访问/调用父组件的方法(示例代码)
Feb 08 Javascript
vuex如何重置所有state(可定制)
Jan 17 Javascript
微信小程序实现翻牌抽奖动画
Sep 21 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
PHP实现多服务器session共享之NFS共享的方法
2007/03/16 PHP
PHP分享图片的生成方法
2018/04/25 PHP
php面试中关于面向对象的相关问题
2019/02/13 PHP
php设计模式之工厂方法模式分析【星际争霸游戏案例】
2020/01/23 PHP
基于JQuery的Pager分页器实现代码
2010/07/17 Javascript
JavaScript 放大镜 放大倍率和视窗尺寸
2011/05/09 Javascript
js模仿hover的具体实现代码
2013/12/30 Javascript
原生js结合html5制作小飞龙的简易跳球
2015/03/30 Javascript
js如何判断访问是来自搜索引擎(蜘蛛人)还是直接访问
2015/09/14 Javascript
jQuery文字提示与图片提示效果实现方法
2016/07/04 Javascript
jQuery EasyUI编辑DataGrid用combobox实现多级联动
2016/08/29 Javascript
微信js-sdk界面操作接口用法示例
2016/10/12 Javascript
AngularJs篇:使用AngularJs打造一个简易权限系统的实现代码
2016/12/26 Javascript
原生js的ajax和解决跨域的jsonp(实例讲解)
2017/10/16 Javascript
详解vue 数据传递的方法
2018/04/19 Javascript
浅谈React之状态(State)
2018/09/19 Javascript
详解vue 数组和对象渲染问题
2018/09/21 Javascript
vue+eslint+vscode配置教程
2019/08/09 Javascript
[04:00]DOTA2解说界神雕侠侣 CJ第四天谷子现场过生日
2013/07/30 DOTA
[02:07]DOTA2超级联赛专访BBC:难忘网吧超神经历
2013/06/09 DOTA
学习python之编写简单乘法口诀表实现代码
2016/02/27 Python
python实现求解列表中元素的排列和组合问题
2018/03/15 Python
python读取并定位excel数据坐标系详解
2019/06/26 Python
python plotly绘制直方图实例详解
2019/07/22 Python
Python实现删除某列中含有空值的行的示例代码
2020/07/20 Python
nohup的用法
2014/08/10 面试题
小学端午节活动方案
2014/03/13 职场文书
职业生涯规划书前言
2014/04/15 职场文书
毕业生面试求职信
2014/06/23 职场文书
经营目标管理责任书
2014/07/25 职场文书
幼儿园感恩节活动总结
2015/03/24 职场文书
员工升职自荐信
2015/03/27 职场文书
2016年党员承诺书范文
2016/03/24 职场文书
入伍志愿书怎么写?
2019/07/19 职场文书
使用Pytorch训练two-head网络的操作
2021/05/28 Python
如何用python清洗文件中的数据
2021/06/18 Python