业务场景
客户需要在页面有一个打印按钮，点击之后可以打印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查找到对应的元素，将该元素隐藏起来，打印结束之后，再将隐藏的元素显示出来即可。
属性
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对移动技术网的支持。
如对本文有疑问， 点击进行留言回复！！
2016年信息安全工程师综合知识第11-15题解析【建群网培信息安全工程师】
网友评论