jQuery 点击按钮打印指定文本内容
Unsplash
这是在做 JavaScript 调用浏览器打印快递单功能时所遇到的一些坑，总结了一下，分享给大家
先大概说下需求，表格里的每一行存储一张订单信息，包括购买的商品、商家信息、联系人信息等等，勾选需要打印的订单，点击打印按钮，将订单信息填充到快递单模板中，然后 JavaScript 调用浏览器的打印功能，这里只会展示项目中所涉及到的主要代码，完整的代码将不会在这里展示
1. 打印页面指定部分
通过 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;
})
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
行文过程中出现错误或不妥之处在所难免，希望大家能够给予指正，以免误导更多人，最后，如果你觉得我的文章写的还不错，希望能够点一下喜欢和关注，为了我能早日成为简书优秀作者献上一发助攻吧，谢谢！^ ^
