原理是利用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>效果图：
