|
蘇喂蘇喂蘇喂su 于 2020-05-29 15:37:11 發(fā)布 3556 收藏 13 分類專欄： 原生JavaScript 版權(quán) 原生JavaScript 專欄收錄該內(nèi)容 59 篇文章1 訂閱 訂閱專欄 原理是利用iframe，原生js寫法完整demo。如果需要打印的內(nèi)容比較多，建議做一個模板。本人在項目中是用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;">標(biāo)準(zhǔn)快遞</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>寄件始發(fā)地</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>投遞應(yīng)收寄遞費：￥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);"> 快件送達收貨人地址，經(jīng)收件人或收件人允許的代收人簽字視為送達</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;">件數(shù)：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>寄件始發(fā)地</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;"> 網(wǎng)址：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> 效果圖： —— 
—————————————— 版權(quán)聲明：本文為CSDN博主「蘇喂蘇喂蘇喂su」的原創(chuàng)文章，遵循CC 4.0 BY-SA版權(quán)協(xié)議，轉(zhuǎn)載請附上原文出處鏈接及本聲明。 原文鏈接：https://blog.csdn.net/joyvonlee/article/details/106426175 |
|
|
