业务场景

客户需要在页面有一个打印按钮，点击之后可以打印展示图表的内容以及文字提示信息，经谷歌搜索发现，实现方法大概有三种之多，其他两种不太熟悉，而采用的这种打印方式是一个在框架的基本上开发的一个打印插件，因此可以使用框架的方式查找元素，因此决定采用这种方式。

先看一下实现的效果图，如下：

实现效果图

引入射流研究…文件

脚本类型=' text/JavaScript ' src=' http : _ _ JS _ _/jquery-migrate-1。2 .1 .量滴JS '/script脚本类型=' text/JavaScript ' src=' http : _ _ JS _ _/jqprint-0。3 .JS '/脚本注意：这里是先引入的框架文件，如果没有引入第一个射流研究…文件的话，会出现兼容性问题，导致使用jqprint打印时报错。

超文本标记语言页面

这里面的超文本标记语言标签很多的

div class=' wrap-content container ' id=' container '表格边框=' 0 '单元格填充=' 0 '单元格间距=' 0 ' class=' store-join base info '并且tr th colspan=' 40 '用户信息/th/tr/ad t正文tr style='背景： RGB(255，255，255)；'泰国(泰国)姓名：/th TD col span=' 40 ' 18030632605/TD/tr style='背景： RGB(255，255，255)；'泰国(泰国)性别：/th td colspan='40 '男/TD/tr/tr style='背景： RGB(255，255，255)；'泰国(泰国)年龄：/th TD colspan=' 40 ' 41/TD/tr tr style='背景： RGB(255，255，255)；'泰国(泰国)身份证：/th TD colspan=' 40 ' 52272419770101059 x/TD/tr style='背景： RGB(255，255，255)；'泰国(泰国)所属机构：/th td colspan='40 '上海市政法委/td /tr /tbody /table.button class=' BTN BTN-危险打印BTN 1 ' onclick=' BTN打印click()' type=' button '打印/按钮当然下面还有很多的超文本标记语言标签，在这里就不展示了。

打印按钮点击之后执行的函数

函数btnPrintClick(){ var imgBox=$(' # img _ box ')；var图表框=$(' # main ')；if(IMgbox。长度=0){ ChartBox。在(' div id=' IMG _ BOx '/div ')之后；imgBox=$(' # img _ box ')；} //将统计图生成图片并放入img-box，并显示图片img-box imgbox。html(' img src=' http : ' my chart。getdataurl()' '/').css('display '，' block ')；//隐藏统计图图chart-box chartBox.css('display '，' none ')；//调整图片大小var img=IMgbox。find(' img ')；var imgWidth=img。宽度()；var showWidth=1000//显示宽度，即图片缩小到的宽度if (imgWidth showWidth) { //只有当图片大了才缩小var imgnewehight=img。高度()/(IMgwidth/show width)；img。CSS({ ' width ' : show width ' px '，' height ' : imgnewheight ' px ' })；} var imgbox 2=$(' # img _ box 2 ')；var图表框2=$(' # main 2 ')；if(IMgbox 2。长度=0){ ChartBox 2。在(' div id=' IMG _ Box 2 '/div ')之后；img box 2=$(' # img _ box 2 ')；} //将统计图生成图片并放入img-box，并显示图片img-box imgbox 2。html(' img src=' http : ' my chart 2。getdataurl()' '/').css('display '，' block ')；//隐藏统计图图图表框chartBox2.css('display '，' none ')；//调整图片大小var img 2=IMgbox 2。find(' img ')；var img2宽度=img 2。宽度()；var show2Width=1000//显示宽度，即图片缩小到的宽度if (img2Width show2Width) { //只有当图片大了才缩小var img2新高度=img 2。height()/(img2宽度/show 2宽度)；img 2。CSS({ ' width ' : show 2 width ' px '，' height ' : img2a new height ' px ' })；} //打印$('#TestQuestions ').jqprint()；//执行打印后再切换回来//显示统计图图chart-box chartBox.css('display '，' block ')；chartBox2.css('display '，' block ')；//隐藏图片img-box imgBox.css('display '，' none ')；imgBox2.css('display '，' none ')；}注意事项：

这里使用了图片的缩放比例的方式。比如展示图表要显示的内容特别多的话，一般在超文本标记语言页面中采用的是在X轴上使用滚动条的方式，但是打印时可以将展示图表先转换成图片，并等比例进行缩放，打印完毕之后再还原回来即可。

任何不需要打印的标签都可以先隐藏。对于不需要出现在打印页面上的标签内容，我们使用jQuery在打印前找到对应的元素，隐藏该元素，然后在打印后显示隐藏的元素。

属性

Debug : false。//如果为真，则显示iframe的查看效果(iframe默认的高度和宽度都很小，在源代码中可以放大)，默认值为false importcss: true，//true，//true表示从原页面导入css，默认值为true。(如果为真，您将首先查找$('link[media=print])，如果不是，您将在$('link ')中查找css文件。)Printcontainer 3360 True，//表示如果打印时必须包含最初选择的对象(注意：将其设置为false可能会破坏您的CSS规则)。OperaSupport: false //表示如果插件还必须支持opera浏览器，在这种情况下，它会提供一个临时的打印选项卡。默认为真汇总

以上就是本文的全部内容。希望本文的内容对大家的学习或工作有一定的参考价值。有问题可以留言交流。谢谢你的支持。