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

Nian糕

修改于 2024-03-16 17:26:05

4.1K0

修改于 2024-03-16 17:26:05

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

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

打印页面指定部分

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

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

我们将打印的部分即快递单模板放到一个 ID 为printableArea的div中，并添加一个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;
})

生成二维码及条形码

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

条形码及二维码的生成都需要引入指定的jquery-barcode文件，条形码生成的文件直接把下面的代码复制到你的文件中即可

<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"
});

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

填入订单数据

将 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();
            }
        }
    })
})

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2017.09.12 ，如有侵权请联系 cloudcommunity@tencent.com 删除

其他

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

其他

登录后参与评论

0 条评论

热度