jquery的插件怎么打印页面内容

这次给大家带来jquery的插件怎么打印页面内容，jquery的插件怎么打印页面内容注意事项有哪些，下面就是实战案例，一起来看一下。

业务场景

客户需要在页面有一个打印按钮，点击之后可以打印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查找到对应的元素，将该元素隐藏起来，打印结束之后，再将隐藏的元素显示出

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

jQuery运行页面怎样默认触发点击事件

jquery里的on和click的使用方法

鼠标悬停效果插件

用jquery制作的页面内容鼠标悬停效果的插件

下载

layui弹窗内窗口之间怎样传参数