<div class="end hide"id="home7">
<img src="images/endImg.png"style="margin: 0px auto;width: 100px;height: 100px;display: block;">
<p class="endName"></p>
<div style="background-color: #f9f9f9;padding: 25px;padding: 20px"id="home7-text">
</div>
<div style="display: flex;justify-content: space-around;margin-top: 20px;">
<p class="endName-btn printTicket"onclick="printTicket()">打印小票</p>
</div>
</div>html页面准备好了，接下来就是打印唤起web页面的打印
//打印小票
function printTicket() {
//创建iframe
const iframe = document.createElement('IFRAME');
// iframe 不展示在页面
document.body.appendChild(iframe)
var doc = iframe.contentWindow.document;
//获取需要打印的局部页面的DOM
let el = document.getElementById("home7-text");
//需要渲染打印的页面
let contentHtml=`<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head" runat="server">
<title>
<asp:ContentPlaceHolder runat="server" ID="TitleContent" />
</title>
</head>
<body>
<div>
<div style="font-size: 14px;text-align: center;">-----顾客存根-----</div>
<div style="font-size: 10px;margin: 0;padding: 0"> ${el.innerHTML}</div>
</div>
<div style="margin: 5px 0">**************************</div>
<div>
<div style="font-size: 14px;text-align: center;">-----门店存根-----</div>
<div style="font-size: 10px">
<div style="font-size: 10px;margin: 0;padding: 0"> ${el.innerHTML}</div>
</div>
</div>
</body>
</html>`
doc.write(contentHtml); //要打印区域中写入要打印内容
doc.close(); // 某些浏览器中不关闭该区域的话无法调用print方法
iframe.contentWindow.focus();
//唤起打印机打印
iframe.contentWindow.print();
//清空打印内容
document.body.removeChild(iframe);
}自此打印功能就完成了