当前位置: 首页 > 编程笔记 >

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

曾华翰
2023-03-14
本文向大家介绍利用jqprint插件打印页面内容的实现方法,包括了利用jqprint插件打印页面内容的实现方法的使用技巧和注意事项,需要的朋友参考一下

业务场景

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

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


实现效果图

引入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

总结

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

 类似资料:
  • 问题内容: 我正在使用AJAX将表单数据发送到建立并发送html电子邮件的服务器php文件。我在服务器php文件中回显了部分数据。回显的html生成一个表,我希望用户在纸上打印。我想打开默认的浏览器打印对话框,以便用户可以打印他/她看不到的表。我不在乎是否必须打开一个新选项卡才能显示回显的内容。这有可能吗? 问题答案: 返回该html表单ajax请求,然后使用javascript打印 此代码未经测

  • 我正在尝试使用HttpURLconnection类读取https://example.com/的内容。我已经移除了斜大括号之间的html标记,但是我在移除卷曲大括号之间的单词方面失败了。此外,字与字之间没有需要打印的空格。 如何去除卷边大括号之间的内容?以及如何在句子中的词与词之间放空格?

  • 本文向大家介绍jQuery插件jquery-barcode实现条码打印的方法,包括了jQuery插件jquery-barcode实现条码打印的方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了jQuery插件jquery-barcode实现条码打印的方法。分享给大家供大家参考,具体如下: 这是一个纯js的jQuery插件,项目地址:http://barcode-coder.com/en/

  • 问题内容: 打印DIV内容的最佳方法是什么? 问题答案: 与早期版本相比有轻微变化-已在CHROME上测试

  • 本文向大家介绍EasyUI实现二级页面的内容勾选的方法,包括了EasyUI实现二级页面的内容勾选的方法的使用技巧和注意事项,需要的朋友参考一下 EasyUI,在增、删的时候,经常用到二级页面进行勾选。 可以在datagird下面添加onCheck、onUncheck、onSelectAll、onUnselectAll事件。 在这些事件中,将勾选的内容存到map中,并转换成json格式字符串放到隐藏

  • 本文向大家介绍php利用反射实现插件机制的方法,包括了php利用反射实现插件机制的方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了php利用反射实现插件机制的方法。分享给大家供大家参考。具体实现方法如下: 希望本文所述对大家的php程序设计有所帮助。