利用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 相关文章推荐
jQuery 1.5.1 发布,全面支持IE9 修复大量bug
Feb 26 Javascript
jquery创建并行对象或者合并对象的实现代码
Oct 10 Javascript
基于JQuery 选择器使用说明介绍
Apr 18 Javascript
详解javascript中的事件处理
Nov 06 Javascript
jQuery基于cookie实现的购物车实例分析
Dec 24 Javascript
JS控制文本域只读或可写属性的方法
Jun 24 Javascript
BootStrap框架个人总结(bootstrap框架、导航条、下拉菜单、轮播广告carousel、栅格系统布局、标签页tabs、模态框、菜单定位)
Dec 01 Javascript
angularjs封装$http为factory的方法
May 18 Javascript
vue 实现锚点功能操作
Aug 10 Javascript
JavaScript实现前端网页版倒计时
Mar 24 Javascript
JavaScript前端面试扁平数据转tree与tree数据扁平化
Jun 14 Javascript
vue实现input输入模糊查询的三种方式
Aug 14 Vue.js
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
PHP封装分页函数实现文本分页和数字分页
2014/10/23 PHP
浅析php原型模式
2014/11/25 PHP
php使用fputcsv()函数csv文件读写数据的方法
2015/01/06 PHP
PHP使用ODBC连接数据库的方法
2015/07/18 PHP
php项目开发中用到的快速排序算法分析
2016/06/25 PHP
PHP入门教程之面向对象的特性分析(继承,多态,接口,抽象类,抽象方法等)
2016/09/11 PHP
PHP7匿名类用法分析
2016/09/26 PHP
PHP isset()与empty()的使用区别详解
2017/02/10 PHP
ExtJS下书写动态生成的xml(兼容火狐)
2013/04/02 Javascript
Extjs 4.x 得到form CheckBox 复选框的值
2014/05/04 Javascript
JQuery拖动表头边框线调整表格列宽效果代码
2014/09/10 Javascript
JQuery中Text方法用法实例分析
2015/05/18 Javascript
js实现点击文本框显示日期选择器特效代码分享
2020/05/21 Javascript
JavaScript组件开发完整示例
2015/12/15 Javascript
javascript如何实现360度全景照片问题汇总
2016/04/04 Javascript
深入理解JS addLoadEvent函数
2016/05/20 Javascript
jQuery轮播图效果精简版完整示例
2016/09/04 Javascript
详解vue中引入stylus及报错解决方法
2017/09/22 Javascript
vue使用 better-scroll的参数和方法详解
2018/01/25 Javascript
微信小程序按顺序同步执行的两种方式
2019/12/20 Javascript
[40:05]LGD vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
[原创]Python入门教程3. 列表基本操作【定义、运算、常用函数】
2018/10/30 Python
python pygame模块编写飞机大战
2018/11/20 Python
python实现名片管理系统项目
2019/04/26 Python
python写程序统计词频的方法
2019/07/29 Python
Python 使用 prettytable 库打印表格美化输出功能
2019/12/26 Python
西班牙汉普顿小姐:购买帆布鞋和太阳镜
2016/10/23 全球购物
SheIn俄罗斯:时尚女装网上商店
2017/02/28 全球购物
西班牙鞋子和箱包在线销售网站:zapatos.es
2020/02/17 全球购物
大学生四年生活自我鉴定
2013/11/21 职场文书
追悼会上的答谢词
2014/01/10 职场文书
大四学生找工作的自荐信
2014/03/27 职场文书
保证书格式范文
2014/04/28 职场文书
简爱读书笔记
2015/06/26 职场文书
面试中老生常谈的MySQL问答集锦夯实基础
2022/03/13 MySQL
Android开发实现极为简单的QQ登录页面
2022/04/24 Java/Android