利⽤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 >
<th>姓名：</th>
<td colspan="40">180********</td>
</tr>
<tr >
<th>性别：</th>ascii码值71h英文字母
<td colspan="40">男</td>
源程序有哪些</tr>
<tr >
<th>年龄：</th>
<td colspan="40">41</td>
</tr>
<tr >
<th>⾝份证：</th>
<td colspan="40">522724************</td>
</tr>
<tr >
<th>所属机构：</th>
<td colspan="40">上海市政法委</td>
</tr>
</tbody>
</table>
......jquery下载文件插件
css父元素选择器
<button class="btn btn-danger printBtn1" onclick="btnPrintClick()" type="button">打印</button>
当然下⾯还有很多的html标签，在这⾥就不展⽰了。
打印按钮点击之后执⾏的函数
function btnPrintClick(){
var imgBox = $('#img_box');
var chartBox = $('#main');clrscr怎么定义
if (imgBox.length <= 0) {
chartBox.after('<div id="img_box"></div>');
imgBox = $('#img_box');
}
// 将echart⽣成图⽚并放⼊img-box，并显⽰图⽚img-box
imgBox.html('< img src="' + DataURL() + '"/>').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="' + DataURL() + '"/>').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
总结
以上就是这篇⽂章的全部内容了，希望本⽂的内容对⼤家的学习或者⼯作具有⼀定的参考学习价值，如果有疑问⼤家可以留⾔交流，谢谢⼤家对的⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。