其实我们电脑上任意一款浏览器都自带了打印功能，按住 Ctrl + P 就能调用打印功能，所以，你要做的，就只需要自定义好打印的内容就行；
话不多说，先来看下效果 在线预览
自定义打印小票
1、打印小票的html部分
<div class="dynamic-component-demo" id="dynamic-component-demo">
<div class="printView">
<div class="header">
<div class="compName">狗蛋羊肉店</div>
</div>
<div class="block base">
<div class="print-item">
<span class="item-label">单号：</span>
<span class="item-value">202209300301</span>
</div>
<div class="print-item">
<span class="item-label">下单日期：</span>
<span class="item-value">2022-09-30</span>
</div>
</div>
<div class="memberInfo">
<div class="body-section">
<span class="print-title">用户信息</span>
<div class="line" style="padding: 2px 0px; font-size: 8px; margin-top: 8px;">
<div class="title" style="display: inline-block; vertical-align: top; width: 100%; text-align: left;" >姓名:</div>
<div class="val" style=" display: inline-block; vertical-align: top; width: 100%; text-align: right;" >王二狗</div>
</div>
<div class="line" style="padding: 2px 0px; font-size: 8px;">
<div class="title" style="display: inline-block; vertical-align: top; width: 100%; text-align: left;" >手机号:</div>
<div class="val" style=" display: inline-block; vertical-align: top; width: 100%; text-align: right;" >186****1126</div>
</div>
<div class="line" style="padding: 2px 0px; font-size: 8px;">
<div class="title" style="display: inline-block; vertical-align: top; width: 100%; text-align: left;" >编号:</div>
<div class="val" style=" display: inline-block; vertical-align: top; width: 100%; text-align: right;" >kuishou0307</div>
</div>
</div>
</div>
<div class="equity-details">
<div class="print-title">下单内容</div>
<div class="body-section">
<div class="body-table">
<div class="table">
<div class="table-tr">
<div style="width: 33%;">标准价</div>
<div style="width: 33%;">数量</div>
<div data-v-705e91bf>实付</div>
</div>
</div>
<div data-v-705e91bf>
<div class="right-name">羊腰子</div>
<table class="table">
<tr data-v-705e91bf>
<td class="left" style="width: 33%;">20.5</td>
<td class="center" style="width: 33%;">×1</td>
<td class="right">16.8</td>
</tr>
</table>
<div class="right-name">羊腿</div>
<table class="table">
<tr data-v-705e91bf>
<td class="left" style="width: 33%;">68</td>
<td class="center" style="width: 33%;">×1</td>
<td class="right">68</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div class="payment-details">
<div class="print-title">支付明细</div>
<div class="total">16.8</div>
<div class="details-header">
<div data-v-705e91bf>支付方式</div>
<div data-v-705e91bf>实付</div>
</div>
<div class="details-content">
<div class="line" style="padding: 2px 0px; font-size: 8px;">
<div class="title" style="display: inline-block; vertical-align: top; width: 100%; text-align: left;" >支付宝:</div>
<div class="val" style=" display: inline-block; vertical-align: top; width: 100%; text-align: right;" >84.8</div>
</div>
</div>
</div>
<!---->
<div class="remarks">
<div class="line" style="padding: 2px 0px; font-size: 8px;">
<div class="title" style="display: inline-block; vertical-align: top; width: 100%; text-align: left;" >备注:</div>
<div class="val" style=" display: inline-block; vertical-align: top; width: 100%; text-align: right;" >微辣</div>
</div>
<div class="line" style="padding: 2px 0px; font-size: 8px;">
<div class="title" style="display: inline-block; vertical-align: top; width: 100%; text-align: left;" >门店电话:</div>
<div class="val" style=" display: inline-block; vertical-align: top; width: 100%; text-align: right;" >0748-8324-7847</div>
</div>
<div class="line" style="padding: 2px 0px; font-size: 8px;">
<div class="title" style="display: inline-block; vertical-align: top; width: 100%; text-align: left;" >门店地址:</div>
<div class="val" style=" display: inline-block; vertical-align: top; width: 100%; text-align: right;" >北京海淀</div>
</div>
</div>
<div class="welcomeMessage">
<div class="print-item">
<div class="item-label">欢迎再次光临～</div>
</div>
</div>
</div>
<button @click="printTickets">打印</button>
</div>2、css 部分
.dynamic-component-demo {
margin: 0 auto;
width: 100%;
}
.printView {
padding: 0 30px;
overflow-y: auto;
margin: 0 auto;
padding: 0 16px;
}
.header {
font-size: 14px;
text-align: center;
padding: 10px 0;
}
.compName {
font-size: 16px;
font-weight: 600;
color: rgba(0, 0, 0, 0.85);
line-height: 22px;
}
.printView::-webkit-scrollbar {
width: 4px;
}
.base {
border-bottom: 1px dashed rgba(0, 0, 0, 0.8);
margin-bottom: 3px;
padding: 12px 0px;
}
.print-item {
margin-bottom: 4px;
font-size: 12px;
}
.remarks {
padding-top: 46px;
margin-bottom: 3px;
border-bottom: 1px dashed rgba(0, 0, 0, 0.8);
}
.memberInfo {
border-bottom: 1px solid rgba(0, 0, 0, 0.8);
border-top: 1px dashed rgba(0, 0, 0, 0.5);
}
.body-section {
padding: 12px 0px;
}
.print-title {
font-size: 14px;
font-weight: 600;
color: rgba(0, 0, 0, 0.85);
line-height: 10px;
}
.equity-details {
border-bottom: 1px solid rgba(0, 0, 0, 0.8);
padding: 12px 0px;
}
.print-title {
font-size: 14px;
font-weight: 600;
color: rgba(0, 0, 0, 0.85);
line-height: 20px;
}
.total {
font-size: 13px;
font-weight: 400;
margin-top: 10px;
line-height: 20px;
}
.details-header {
display: flex;
justify-content: space-between;
align-items: center;
margin: 5px 0px;
font-size: 12px;
line-height: 20px;
border-top: dashed 1px rgba(0, 0, 0, 0.5);
border-bottom: dashed 1px rgba(0, 0, 0, 0.5);
}
.details-item {
line-height: 20px;
}
.body-section {
padding: 12px 0px;
}
.print-title {
font-size: 14px;
font-weight: 600;
color: rgba(0, 0, 0, 0.85);
line-height: 10px;
}
.table {
width: 100%;
line-height: 1.25;
}
.table-tr {
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row;
line-height: 2;
font-size: 12px;
border-top: dashed 1px rgba(0, 0, 0, 0.5);
border-bottom: dashed 1px rgba(0, 0, 0, 0.5);
}
.right-name {
font-size: 13px;
font-weight: 400;
color: rgba(0, 0, 0, 0.85);
}
.refund-header {
display: flex;
justify-content: space-between;
align-items: center;
margin: 10px 0px;
line-height: 20px;
font-size: 12px;
border-top: dashed 1px rgba(0, 0, 0, 0.5);
border-bottom: dashed 1px rgba(0, 0, 0, 0.5);
}
.refund-content {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
line-height: 20px;
}
.refund-item {
font-size: 12px;
line-height: 24px;
}
.content-name {
width: 70%;
font-size: 10px;
}
.content-amount {
font-size: 10px;
}
.welcomeMessage {
font-size: 14px;
padding: 16px 0px;
border-top: 1px dashed rgba(0, 0, 0, 0.5);
}
.block {
padding: 5px 0;
border-bottom: 1px solid #dedede;
font-size: 12px;
}
.block:last-child {
border-bottom: none;
}
.left {
text-align: left;
}
.center {
text-align: center;
}
.right {
text-align: right;
}
th,
td {
text-align: left;
font-size: 8px;
}3、开始打印
printTickets(){
var el = document.getElementsByClassName("printView");
var iframe = document.createElement("IFRAME");
var doc = null;
iframe.setAttribute("id", "cashBillPrintFrame");
iframe.setAttribute("style", "position:absolute;width:0px;height:0px;left:-500px;top:-500px;");
document.body.appendChild(iframe);
doc = iframe.contentWindow.document;
var printView= iframe.contentWindow.document.createElement("div");
printView.innerHTML=`<div class="detail-content content_wrap pl30">${el[0].innerHTML}</div>`;
iframe.contentWindow.document.body.appendChild(printView);
// 这里的样式，与css中保持一致
var cssString =`
.printView {
padding: 0 30px;
overflow-y: auto;
margin: 0 auto;
padding: 0 16px;
}
.header {
font-size: 14px;
text-align: center;
padding: 10px 0;
}
.compName {
font-size: 16px;
font-weight: 600;
color: rgba(0, 0, 0, 0.85);
line-height: 22px;
}
.printView::-webkit-scrollbar {
width: 4px;
}
.base {
border-bottom: 1px dashed rgba(0, 0, 0, 0.8);
margin-bottom: 3px;
padding: 12px 0px;
}
.print-item {
margin-bottom: 4px;
font-size: 12px;
}
.remarks {
padding-top: 46px;
margin-bottom: 3px;
border-bottom: 1px dashed rgba(0, 0, 0, 0.8);
}
.memberInfo {
border-bottom: 1px solid rgba(0, 0, 0, 0.8);
border-top: 1px dashed rgba(0, 0, 0, 0.5);
}
.body-section {
padding: 12px 0px;
}
.print-title {
font-size: 14px;
font-weight: 600;
color: rgba(0, 0, 0, 0.85);
line-height: 10px;
}
.equity-details {
border-bottom: 1px solid rgba(0, 0, 0, 0.8);
padding: 12px 0px;
}
.print-title {
font-size: 14px;
font-weight: 600;
color: rgba(0, 0, 0, 0.85);
line-height: 20px;
}
.total {
font-size: 13px;
font-weight: 400;
margin-top: 10px;
line-height: 20px;
}
.details-header {
display: flex;
justify-content: space-between;
align-items: center;
margin: 5px 0px;
font-size: 12px;
line-height: 20px;
border-top: dashed 1px rgba(0, 0, 0, 0.5);
border-bottom: dashed 1px rgba(0, 0, 0, 0.5);
}
.details-item {
line-height: 20px;
}
.body-section {
padding: 12px 0px;
}
.print-title {
font-size: 14px;
font-weight: 600;
color: rgba(0, 0, 0, 0.85);
line-height: 10px;
}
.table {
width: 100%;
line-height: 1.25;
}
.table-tr {
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row;
line-height: 2;
font-size: 12px;
border-top: dashed 1px rgba(0, 0, 0, 0.5);
border-bottom: dashed 1px rgba(0, 0, 0, 0.5);
}
.right-name {
font-size: 13px;
font-weight: 400;
color: rgba(0, 0, 0, 0.85);
}
.refund-header {
display: flex;
justify-content: space-between;
align-items: center;
margin: 10px 0px;
line-height: 20px;
font-size: 12px;
border-top: dashed 1px rgba(0, 0, 0, 0.5);
border-bottom: dashed 1px rgba(0, 0, 0, 0.5);
}
.refund-content {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
line-height: 20px;
}
.refund-item {
font-size: 12px;
line-height: 24px;
}
.content-name{
width: 70%;
font-size: 10px;
}
.content-amount{
font-size: 10px;
}
.welcomeMessage {
font-size: 14px;
padding: 16px 0px;
border-top: 1px dashed rgba(0, 0, 0, 0.5);
}
.block {
padding: 5px 0;
border-bottom: 1px solid #dedede;
font-size: 12px;
}
.block:last-child {
border-bottom: none;
}
.left {
text-align: left;
}
.center {
text-align: center;
}
.right {
text-align: right;
}
th,td {
text-align: left;
font-size: 8px;
}
`;
var style=iframe.contentWindow.document.createElement("style");
style.setAttribute("type", "text/css");
if(style.styleSheet){// IE
style.styleSheet.cssText = cssString;
} else {// w3c
var cssText = iframe.contentWindow.document.createTextNode(cssString);
style.appendChild(cssText);
}
var script = document.createElement("script");
script.innerHTML = "function printPage(){window.print();}";
var heads = iframe.contentWindow.document.getElementsByTagName("head");
if(heads.length) {
heads[0].appendChild(script);
heads[0].appendChild(style);
}else{
iframe.contentWindow.document.documentElement.appendChild(script);
iframe.contentWindow.document.documentElement.appendChild(style);
}
let that = this;
function printIframe(id) {
let iframe = document.frames ? document.frames[id] : document.getElementById(id);
let ifWin = iframe.contentWindow || iframe;
iframe.focus();
ifWin.printPage();
that.$emit("close");
document.body.removeChild(iframe);
return false;
}
printIframe("cashBillPrintFrame");
this.iframe = iframe;
}