原理是利用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 οnclick="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>
效果圖：
