利用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

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