|
苏喂苏喂苏喂su 于 2020-05-29 15:37:11 发布 3556 收藏 13 分类专栏： 原生JavaScript 版权 原生JavaScript 专栏收录该内容 59 篇文章1 订阅 订阅专栏 原理是利用iframe，原生js写法完整demo。如果需要打印的内容比较多，建议做一个模板。本人在项目中是用vue做的，需要打印的部分在另外一个页面，这样看起来会没有那么乱。记得将打印部分隐藏起来，另外分享一个快递面单的模板。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>打印</title> </head> <body> <h1 style="display: none;" id="print-iframe">test，test</h1> <button onclick="print()">打印</button> <script> function print() { var iframe = document.createElement('iframe'); document.body.appendChild(iframe) doc = iframe.contentWindow.document; let wrap = document.getElementById("print-iframe").innerHTML; doc.write("<div>" + wrap + "</div>"); doc.close(); iframe.contentWindow.focus(); iframe.contentWindow.print(); } </script> </body> </html> 打印的快递面单模板（vue） <template> <div id="print-iframe"> <div style="height: 80px;border: 1px dotted #000;font-size: 12px !important;overflow: hidden;box-sizing:border-box;"> <div style="width: 45%;height: 100%;float: left;border-right: 1px dotted #000;text-align: center;font-weight:bold;box-sizing:border-box;"> <div style="font-size: 15px;margin-top:15px;">EMS快递</div> <div style="font-size: 22px;margin-top:5px;">标准快递</div> </div> <div style="float: left;width: 55%;height: 100%;text-align: center;"> <img style="padding-top: 5px; height: 90%;" :src="message.img" alt /> </div> </div> <div style="height: 60px;border: 1px dotted #000;font-size: 12px !important;overflow: hidden;border-top:none;box-sizing:border-box;"> <div style="width: 50%;height: 100%;float: left;border-right: 1px dotted #000;padding:5px 0 0 5px;box-sizing:border-box;"> <div> 寄件： <span>寄件始发地</span> </div> <div style="padding-left:37px;box-sizing:border-box;">需要打印的电话</div> <div style="padding-left:37px;box-sizing:border-box;">需要打印的地址</div> </div> <span style="font-weight:bold;font-size:28px;text-align:center;display:block;padding-top: 10px;box-sizing: border-box;">公安证照</span> </div> <div style="height: 60px;border: 1px dotted #000;border-top:none;font-size: 12px !important;padding:5px 0 0 5px;box-sizing:border-box;"> <div> 收件： <span>{{ message.tcontactor }}</span> </div> <div style="padding-left:37px;">{{ message.tcustMobile }}</div> <div style="padding-left:37px;">{{ message.tcustAddr }}</div> </div> <div style="height: 60px;border: 1px dotted #000;border-top:none;font-size: 12px !important;overflow: hidden;box-sizing:border-box;"> <div style="width: 45%;height: 100%;float: left;border-right: 1px dotted #000;padding-right: 0;margin-left: -2px;padding:5px 0 0 5px;box-sizing:border-box;"> <div style="line-height:0.8; margin-bottom: 2px;-webkit-transform-origin-x: 0;-webkit-transform: scale(0.8);"> 计费重量：0.1KG</div> <div style="line-height:0.8; margin-bottom: 0px;-webkit-transform-origin-x: 0;-webkit-transform: scale(0.8);"> 保价金额：0</div> <div>投递应收寄递费：￥0</div> </div> <div style="width: 55%;float: left;height: 100%;padding:5px 0 0 5px;box-sizing:border-box;"> <div style="line-height:0.8; margin-bottom: 0px;-webkit-transform-origin-x: 0;-webkit-transform: scale(0.8);"> 收件人/代收人：</div> <div style="line-height:0.8; margin-bottom: 0px;-webkit-transform-origin-x: 0;-webkit-transform: scale(0.8);white-space: nowrap;"> 签收时间：  年  月  日  时</div> <div style="margin-top:-2px;-webkit-transform-origin-x: 0;-webkit-transform: scale(0.76);"> 快件送达收货人地址，经收件人或收件人允许的代收人签字视为送达</div> </div> </div> <div style="height: 86px;border: 1px dotted #000;border-top:none;font-size: 12px !important;padding:10px 0 0 5px;box-sizing:border-box;"> <div style="margin-bottom:20px;"> <span style="margin-right:10px;">件数：1</span> <span>重量(KG):1KG</span> </div> <div> 配货信息： <span style="margin-left:10px;">公安证照</span> </div> </div> <div style="height: 60px;border: 1px dotted #000;border-top:none;font-size: 12px !important;overflow: hidden;box-sizing:border-box;"> <div style="width: 45%;height: 100%;float: left;border-right: 1px dotted #000;text-align: center;padding-right: 0;margin-left: -2px;box-sizing:border-box;"> <img style="padding-top: 5px; height: 90%;" :src="message.img" alt /> </div> <div style="width: 55%;float: left;height: 60px;line-height:60px;text-align:center;"> <span style="font-weight:bold;font-size:28px;">公安证照</span> </div> </div> <div style="height: 80px;padding-right: 0;border: 1px dotted #000;border-top:none;font-size: 12px !important;overflow: hidden;box-sizing:border-box;"> <div style="margin-left: -2px;width: 45%;height: 100%;float: left;border-right: 1px dotted #000;margin-left: -2px;padding:5px 0 0 5px;box-sizing:border-box;"> <div> 寄件： <span>寄件始发地</span> </div> <div style="padding-left:37px;">需要打印的电话</div> <div style="padding-left:37px;">需要打印的地址</div> </div> <div style="width: 55%;float: left;height: 100%;padding:5px 0 0 5px;box-sizing:border-box;"> <div style="margin-bottom: 2px;"> 收件： <span>{{ message.tcontactor }}</span> </div> <div style="padding-left: 37px;margin-bottom: 2px;"> <span>{{ message.tcustMobile }}</span> </div> <div style="padding-left:37px;">{{ message.tcustAddr }}</div> </div> </div> <div style="height: 80px;padding-right: 0;border: 1px dotted #000;border-top:none;font-size: 12px !important;overflow: hidden;box-sizing:border-box;"> <div style="width: 70%; margin-left:-2px;height: 100%;float: left;border-right: 1px dotted #000;padding-right: 0;margin-left: -2px;padding:5px 0 0 5px;box-sizing:border-box;"> <div style="height: 50px;"> 备注： <span>公安证照</span> </div> <div style="padding-top: 5px; border-top: 1px dotted #000;box-sizing:border-box;"> 网址：www.ems.com.cn  客服电话：11183</div> </div> <div style="width: 30%;display:flex;justify-content:center;align-items:center;height: 100%;"> <span style="font-weight:bold;font-size:28px;">公安证照</span> </div> </div> </div> </template> <script> export default { name: "PrintOrder", props: ["message"], data() { return {}; }, watch: { message: { deep: true, handler(val) { console.log("val"); } } } }; </script> <style lang="scss" scoped> </style> 效果图： —— 
—————————————— 版权声明：本文为CSDN博主「苏喂苏喂苏喂su」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。 原文链接：https://blog.csdn.net/joyvonlee/article/details/106426175 |
|
|
