JQuery-jqprint实现打印功能


前言

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是要打印表格的id
        debug: 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";//显示

    
}

六、最终效果

在这里插入图片描述


看完记得点赞

  • 4
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

汪杰杰杰杰

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值