文章目录
前言一、jqprint插件的优势？二、所需插件三、引入JS文件四、给前端添加一个打印按钮五、JS实现打印功能代码六、最终效果前言
WEB开发中有的时候需要直接调用打印功能，目前虽然可以通过内置的函数实现打印，可兼容性却不是很好，这时候jqprint插件的优势就显现出来了。
一、jqprint插件的优势？
jqprint 具有以下优势：
兼容性好，支持IE6及以上版本、谷歌浏览器、火狐浏览器、Safari。使用简单，只需要下载相关JS文件，然后在项目添加即可。技术成熟，通过官方的不断的更新bug还是比较少的。
二、所需插件
插件下载链接：
百度云盘下载 提取码：0714
三、引入JS文件
四、给前端添加一个打印按钮
<div class="modal-footer"><button id="print" style="background-color: #18a689; text-align: center; padding-top: 10px" class="CustomPrint btn-primary" type="button" onclick="printpdf_tab(hdlist)"><i class="fa fa-print fa-2x"></i><br /><span>打印</span></button></div>
五、JS实现打印功能代码
/打印谷歌浏览器无网址信息 function printpdf_tab(demo) {//顶部标题var divdisplay = document.getElementById("printTitle_hdDetail");divdisplay.style.display = "block";//显示//全局字体//var divtbody = document.getElementById("divtbody");//divtbody.style.cssText = "font-size:20px;color:black";//显示顶部盖章字体//var divspan1 = document.getElementById("divspan1");//divspan1.style.fontSize = "22px";//显示var divdisplayone = document.getElementById("work_sub");// divdisplayone.attr("style", "border:2px solid;border-color:#000000");divdisplayone.style.height = "80px";//显示var divdisplaytwo = document.getElementById("work_name");divdisplaytwo.style.height = "100px";//显示var details_areatype = document.getElementById("work_priority");details_areatype.style.height = "100px";//显示var details_areacode = document.getElementById("work_charge");details_areacode.style.height = "100px";//显示var details_rp_name = document.getElementById("work_content");details_rp_name.style.height = "80px";//显示var details_riskaddress = document.getElementById("work_content");details_riskaddress.style.height = "200px";//显示var details_majorriskcode = document.getElementById("work_state");details_majorriskcode.style.height = "80px";//显示var details_rkdescription = document.getElementById("work_founder");details_rkdescription.style.height = "100px";//显示var details_riskIdentify = document.getElementById("operationn");details_riskIdentify.style.height = "100px";//显示var details_risktype = document.getElementById("acceptor");details_risktype.style.height = "100px";//显示var details_poatconqs = document.getElementById("work_addimage");details_poatconqs.style.height = "200px";//显示var details_mainconstep = document.getElementById("work_operation");details_mainconstep.style.height = "200px";//显示var details_mainurgtep = document.getElementById("work_remasrks");details_mainurgtep.style.height = "200px";//显示var details_jobname = document.getElementById("work_creationtime");details_jobname.style.height = "115px";//显示$(demo).jqprint({//shifts是要打印表格的iddebug: false, //不用修改importCSS: true, //表格样式,默认true 有表格线，false 无表格线printContainer: false, //默认operaSupport: false//不支持歌opera浏览器});divdisplay.style.display = "none";//显示divdisplayone.style.height = "50px";//显示divdisplaytwo.style.height = "100px";//显示details_areatype.style.height = "100px";//显示details_areacode.style.height = "100px";//显示details_rp_name.style.height = "50px";//显示details_riskaddress.style.height = "200px";//显示details_majorriskcode.style.height = "50px";//显示details_rkdescription.style.height = "50px";//显示details_riskIdentify.style.height = "100px";//显示details_risktype.style.height = "100px";//显示details_poatconqs.style.height = "200px";//显示details_mainconstep.style.height = "200px";//显示details_mainurgtep.style.height = "200px";//显示details_jobname.style.height = "115px";//显示}
六、最终效果
看完记得点赞
