jQuery 点击按钮打印指定文本内容

Unsplash

这是在做 JavaScript 调用浏览器打印快递单功能时所遇到的一些坑,总结了一下,分享给大家

先大概说下需求,表格里的每一行存储一张订单信息,包括购买的商品、商家信息、联系人信息等等,勾选需要打印的订单,点击打印按钮,将订单信息填充到快递单模板中,然后 JavaScript 调用浏览器的打印功能,这里只会展示项目中所涉及到的主要代码,完整的代码将不会在这里展示

1. 打印页面指定部分

通过 window.print(); 的方法,可以让 JavaScript 打印当前窗口的内容,不过打印的是整个窗口内容,而我们只是需要打印页面的某一个部分,并且该部分的内容是隐藏的,这要怎么实现呢?

stackoverflow | Print <div id=“printarea”></div> only? 下的一个回答,让我得到了答案

我们将打印的部分即快递单模板放到一个 ID 为 printableAreadiv 中,并添加一个 onclick 点击事件,大家也可以尝试下其他的办法,这里只是提供了一种解决方案

<div id="printableArea"  style="display:none;">
      <!-- 打印内容 -->
</div>
<button class="printfFrom">打印快递单</button>

$(".printfFrom").click(function(){
     var printContents = document.getElementById(divName).innerHTML;
     var originalContents = document.body.innerHTML;
     document.body.innerHTML = printContents;
     window.print();
     document.body.innerHTML = originalContents;
})

2. 生成二维码及条形码

在快递单中,我们需要把快递单号生成对应的条形码及二维码,需要大家注意的是,条形码编码有 EAN8、EAN13、EAN128 等编码方式,大家可根据使用环境的不同,以及条形码数字的个数,来选择相应的编码方式,我们在这里使用的是 Code128 编码方式

条形码及二维码的生成都需要引入指定的 jquery 文件,条形码生成的文件直接把下面的代码复制到你的文件中即可,而二维码生成所需要的 jquery-barcode 文件我已经上传到百度网盘了,下载地址请戳 >>> jquery-barcode | Download

<script type="text/javascript" src="http://www.ijquery.cn/js/qrcode/utf.js"></script>
<script type="text/javascript" src="http://www.ijquery.cn/js/qrcode/jquery.qrcode-zh.js"></script>
<script type="text/javascript" src="http://www.ijquery.cn/js/qrcode/qrcode.js"></script>

然后将快递单号传入即可,具体代码如下所示:

// 生成条形码
$(".tiaoxingma").barcode(orderId.carrier_no, "code128", {barHeight:"50",barWidth:"2"});

// 生成二维码
$(".erweima").qrcode({
    render: "table", // 可采用canvas
    text: orderId.carrier_no,
    width:"70",
    height:"70"
});

当你的代码正确,而打印预览却没有显示出条形码及二维码时,可能是你忘记勾选背景图片打印的选项了

打印设置

3. 填入订单数据

将 ajax 请求返回的数据填入到快递单模板中即可,代码如下:

<div id="printableArea"  style="display:none;">
      <!-- 打印内容 -->
</div>
<button class="printfFrom">打印快递单</button>

$(".printfFrom").click(function(){

    // 判断勾选订单是否为空
    
    $.ajax({
        url: "{:url('order/index/getOrderGoodsByOrderIds')}",
        type: 'get',
        data: param, // 发送到服务器的数据
        dataType: 'json',
        success: function(result){

            // 返回订单的数据

            var num = [];
            num = param.order_ids.split(",");
            var rtnData = result.data;            
            for(var i = 0; i < num.length; i++){
                var orderList = num[i];
                var orderId = rtnData[orderList];
                var carrier = orderId.carrier_info; //订单编号
                // 判断字段是否为空
                if(jQuery.isEmptyObject(carrier)) return false;
                // 条形码打印
                $(".tiaoxingma").barcode(orderId.carrier_no, "code128", {barHeight:"50",barWidth:"2"});
                // 二维码打印
                $(".erweima").empty(); // 当有多张订单需要打印时,需要清空上一订单生成的二维码
                $(".erweima").qrcode({
                    render: "table", // 可换成canvas
                    text: orderId.carrier_no,
                    width:"70",
                    height:"70"
                });

                // 向模板填充数据

                var printContents = $("#printableArea").html();
                var originalContents = document.body.innerHTML;
                document.body.innerHTML = printContents;
                window.print();
                document.body.innerHTML = originalContents;
                window.location.reload();
            }
        }
    })
})

打印样图

End of File

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏小程序容器

OpenApplus小程序容器

OpenApp+ (https://www.openapplus.com)一个小程序容器,配置简单、功能完善、界面流畅、开箱即用!使用OpenApp+可以快速扩...

5419
来自专栏Jerry的SAP技术分享

S/4HANA for Customer Management里的搜索分页处理

这篇文章的英文版我发在了SAP Community上:Paging Implementation in S/4HANA for Customer Managem...

3934
来自专栏张戈的专栏

解决WordPress升级4.2后调用国外图片导致大量404请求的问题

前几天就收到 WordPress 官方发来的预更新通知,告诉我本周会更新到 4.2。果然,昨天就收到了更新推送消息,随手就点击升级了,前台打开看了下没有看到明显...

36110
来自专栏Jackson0714

30分钟全面解析-图解AJAX原理

41112
来自专栏地方网络工作室的专栏

Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(十四)在项目中使用 jQuery

Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(十四)在项目中使用 jQuery 前情回顾 在上一篇博文中,我们讲到了,...

2037
来自专栏魏艾斯博客www.vpsss.net

Windows 服务器远程桌面不能复制粘贴怎么解决

有网友的 Windows 服务器远程桌面不能复制粘贴,具体情况是在远程桌面复制文本,再粘贴是空白的啥都没有了(粘贴选项是灰色的不可选状态),这种情况解决起来也不...

4514
来自专栏hbbliyong

Eclipse 4.3 Kepler最快汉化方法

eclipse 4.3汉化 eclipse 4.3 ---kepler已经于2013年6月26日发布主要版本,详见:eclipse in wikipedia ?...

2164
来自专栏黑白安全

自助建站逻辑实现功能

PHP和Apache实现多用户自助建站 安装说明请查看附件 项目介绍 PHP+Apache实现多用户自助建站的系统Demo,只实现基本功能

2901
来自专栏西安-晁州

vuejs、eggjs、mqtt全栈式开发设备管理系统

vuejs、eggjs、mqtt全栈式开发简单设备管理系统 业余时间用eggjs、vuejs开发了一个设备管理系统,通过mqtt协议上传设备数据至web端实时展...

2.7K7
来自专栏逸鹏说道

VSCode中文乱码问题+Git环境配置

异常处理汇总-开发工具 http://www.cnblogs.com/dunitian/p/4522988.html 1.VSCode中文乱码问题 (file...

4378

扫码关注云+社区

领取腾讯云代金券