利用jqprint插件打印页面内容的实现方法


Posted in Javascript onJanuary 09, 2018

业务场景

客户需要在页面有一个打印按钮,点击之后可以打印Echarts图表的内容以及文字提示信息,经谷歌搜索发现,实现方法大概有三种之多,其他两种不太熟悉,而采用的这种打印方式是一个在jQuery的基本上开发的一个print插件,因此可以使用jQuery的方式查找元素,因此决定采用这种方式。

先看一下实现的效果图,如下:

利用jqprint插件打印页面内容的实现方法

实现效果图

引入js文件

<script type="text/javascript" src="__JS__/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="__JS__/jqprint-0.3.js"></script>

注意:这里是先引入的jQuery文件,如果没有引入第一个js文件的话,会出现兼容性问题,导致使用jqprint打印时报错。

html页面

这里面的html标签很多的

<div class="wrap-content container" id="container">
 <table border="0" cellpadding="0" cellspacing="0" class="store-joinin baseinfo">
  <thead>
   <tr>
    <th colspan="40">用户信息</th>
   </tr>
  </thead>
  <tbody>
   <tr style="background: rgb(255, 255, 255);">
    <th>姓名:</th>
    <td colspan="40">18030632605</td>
   </tr>
   <tr style="background: rgb(255, 255, 255);">
    <th>性别:</th>
    <td colspan="40">男</td>
   </tr>
   <tr style="background: rgb(255, 255, 255);">
    <th>年龄:</th>
    <td colspan="40">41</td>
   </tr>
   <tr style="background: rgb(255, 255, 255);">
    <th>身份证:</th>
    <td colspan="40">52272419770101059X</td>
   </tr>
   <tr style="background: rgb(255, 255, 255);">
    <th>所属机构:</th>
    <td colspan="40">上海市政法委</td>
   </tr>
  </tbody>
  </table>
 ......
 <button class="btn btn-danger printBtn1" onclick="btnPrintClick()" type="button">打 印</button>

当然下面还有很多的html标签,在这里就不展示了。

打印按钮点击之后执行的函数

function btnPrintClick(){
 var imgBox = $('#img_box');
 var chartBox = $('#main');
 if (imgBox.length <= 0) {
  chartBox.after('<div id="img_box"></div>');
  imgBox = $('#img_box');
 }
 // 将echart生成图片并放入img-box,并显示图片img-box
 imgBox.html('< img src="' + myChart.getDataURL() + '"/>').css('display','block');
 // 隐藏echart图chart-box
 chartBox.css('display','none');
 // 调整img大小
 var img = imgBox.find('img');
 var imgWidth = img.width();
 var showWidth = 1000; // 显示宽度,即图片缩小到的宽度
 if (imgWidth > showWidth) { // 只有当图片大了才缩小
  var imgNewHeight = img.height() / (imgWidth / showWidth);
  img.css({'width': showWidth + 'px', 'height': imgNewHeight + 'px'});
 }
 var imgBox2 = $('#img_box2');
 var chartBox2 = $('#main2');
 if (imgBox2.length <= 0) {
  chartBox2.after('<div id="img_box2"></div>');
  imgBox2 = $('#img_box2');
 }
 // 将echart生成图片并放入img-box,并显示图片img-box
 imgBox2.html('< img src="' + myChart2.getDataURL() + '"/>').css('display','block');
 // 隐藏echart图chart-box
  chartBox2.css('display','none');
 // 调整img大小
 var img2 = imgBox2.find('img');
 var img2Width = img2.width();
 var show2Width = 1000; // 显示宽度,即图片缩小到的宽度
 if (img2Width > show2Width) { // 只有当图片大了才缩小
  var img2NewHeight = img2.height() / (img2Width / show2Width);
  img2.css({'width': show2Width + 'px', 'height': img2NewHeight + 'px'});
 }
 // 打印
 $("#TestQuestions").jqprint();
 // 执行打印后再切换回来
 // 显示echart图chart-box
 chartBox.css('display','block');
 chartBox2.css('display','block');
 // 隐藏图片img-box
 imgBox.css('display','none');
 imgBox2.css('display','none');
}

注意事项:

这里使用了图片的缩放比例的方式。比如Echarts图表要显示的内容特别多的话,一般在html页面中采用的是在X轴上使用滚动条的方式,但是打印时可以将Echarts图表先转换成图片,并等比例进行缩放,打印完毕之后再还原回来即可。

任何不需要打印的标签都可以先隐藏。对于不需要出现在打印页面的标签内容,我们在打印之前使用jQuery查找到对应的元素,将该元素隐藏起来,打印结束之后,再将隐藏的元素显示出来即可。

属性

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

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
javascript实现面向对象类的功能书写技巧
Mar 07 Javascript
JavaScript中使用构造器创建对象无需new的情况说明
Mar 01 Javascript
js选取多个或单个元素的实现代码(用class)
Aug 22 Javascript
js中array的sort()方法使用介绍
Feb 20 Javascript
Jquery实现顶部弹出框特效
Aug 08 Javascript
jquery实现叠层3D文字特效代码分享
Aug 21 Javascript
js的OOP继承实现(必看篇)
Feb 18 Javascript
微信小程序实现登录页云层漂浮的动画效果
May 05 Javascript
Vue组件之全局组件与局部组件的使用详解
Oct 09 Javascript
vue-cli结合Element-ui基于cropper.js封装vue实现图片裁剪组件功能
Mar 01 Javascript
详解express使用vue-router的history踩坑
Jun 05 Javascript
浅谈javascript事件环微任务和宏任务队列原理
Sep 12 Javascript
react-router v4如何使用history控制路由跳转详解
Jan 09 #Javascript
基于vue-ssr服务端渲染入门详解
Jan 08 #Javascript
浅谈Vue2.0父子组件间事件派发机制
Jan 08 #Javascript
如何快速解决JS或Jquery ajax异步跨域的问题
Jan 08 #jQuery
jQuery+SpringMVC中的复选框选择与传值实例
Jan 08 #jQuery
浅谈SpringMVC中post checkbox 多选框value的值(隐藏域方式)
Jan 08 #Javascript
JQuery实现table中tr上移下移的示例(超简单)
Jan 08 #jQuery
You might like
《Re:从零开始的异世界生活 冰结之绊》
2020/04/09 日漫
使用 MySQL Date/Time 类型
2008/03/26 PHP
PHP HTML代码串 截取实现代码
2009/06/29 PHP
smarty简单入门实例
2014/11/28 PHP
THINKPHP在添加数据的时候获取主键id的值方法
2017/04/03 PHP
新页面打开实际尺寸的图片
2006/08/25 Javascript
JQuery 入门实例1
2009/06/25 Javascript
javascript实现的在当前窗口中漂浮框的代码
2010/03/15 Javascript
对xmlHttp对象的理解
2011/01/17 Javascript
使用基于jquery的gamequery插件做JS乒乓球游戏
2011/07/31 Javascript
jquery插件制作 自增长输入框实现代码
2012/08/17 jQuery
页面右下角弹出提示框示例代码js版
2013/08/02 Javascript
在JS中如何调用JSP中的变量
2014/01/22 Javascript
调用innerHTML之后onclick失效问题的解决方法
2014/01/28 Javascript
nodejs基础应用
2017/02/03 NodeJs
xmlplus组件设计系列之列表(4)
2017/04/26 Javascript
JS实现的将html转为pdf功能【基于浏览器端插件jsPDF】
2018/02/06 Javascript
关于Vue源码vm.$watch()内部原理详解
2019/04/26 Javascript
微信小程序文章详情页跳转案例详解
2019/07/09 Javascript
vue 解决文本框被键盘遮住的问题
2019/11/06 Javascript
js 对象使用的小技巧实例分析
2019/11/08 Javascript
SpringBoot+Vue开发之Login校验规则、实现登录和重置事件
2020/10/19 Javascript
[04:16]DOTA2英雄梦之声_第09期_斧王
2014/06/21 DOTA
深入解析Python中的urllib2模块
2015/11/13 Python
python各种语言间时间的转化实现代码
2016/03/23 Python
python 使用值来排序一个字典的方法
2018/11/16 Python
python利用dlib获取人脸的68个landmark
2019/11/27 Python
快速查找Python安装路径方法
2020/02/06 Python
Python如何使用turtle库绘制图形
2020/02/26 Python
python利用appium实现手机APP自动化的示例
2021/01/26 Python
加拿大女装网上购物:Reitmans
2016/10/20 全球购物
ALDO英国官网:加拿大女鞋品牌
2018/02/19 全球购物
自我鉴定书范文
2013/10/02 职场文书
入党函调证明材料
2014/12/24 职场文书
小学生作文批改评语
2014/12/25 职场文书
canvas绘制折线路径动画实现
2021/05/12 Javascript