业务场景
创新互联长期为上千多家客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为周口企业提供专业的网站设计制作、成都网站设计，周口网站改版等技术服务。拥有十余年丰富建站经验和众多成功案例,为您定制开发。
客户需要在页面有一个打印按钮，点击之后可以打印Echarts图表的内容以及文字提示信息，经谷歌搜索发现，实现方法大概有三种之多，其他两种不太熟悉，而采用的这种打印方式是一个在jQuery的基本上开发的一个print插件，因此可以使用jQuery的方式查找元素，因此决定采用这种方式。
先看一下实现的效果图，如下：
实现效果图
引入js文件
注意：这里是先引入的jQuery文件，如果没有引入第一个js文件的话，会出现兼容性问题，导致使用jqprint打印时报错。
html页面
这里面的html标签很多的
......
用户信息 姓名： 18030632605 性别： 男 年龄： 41 身份证： 52272419770101059X 所属机构： 上海市政法委 当然下面还有很多的html标签，在这里就不展示了。
打印按钮点击之后执行的函数
function btnPrintClick(){ var imgBox = $('#img_box'); var chartBox = $('#main'); if (imgBox.length <= 0) { chartBox.after(''); 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(''); 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查找到对应的元素，将该元素隐藏起来，打印结束之后，再将隐藏的元素显示出来即可。
属性
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对创新互联的支持。