web打印功能

最新推荐文章于 2024-09-10 13:41:54 发布

小松鼠敲代码

最新推荐文章于 2024-09-10 13:41:54 发布

阅读量243

点赞数

文章标签：前端 Powered by 金山文档

本文链接：https://blog.csdn.net/weixin_56848461/article/details/129553274

版权

文章介绍了一个使用JavaScript和HTML创建的打印功能，通过创建iframe，获取指定DOM元素内容，并构建用于打印的HTML结构，然后调用打印方法，实现页面的顾客和门店存根部分的打印。在打印完成后，还会清理iframe内容。

摘要由CSDN通过智能技术生成

<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);
}

自此打印功能就完成了