【实现web打印与打印按钮的监听】

早安 977

已于 2023-07-20 15:04:22 修改

阅读量900

点赞数 2

CC 4.0 BY-SA版权

文章标签：前端 javascript 开发语言

于 2023-07-20 14:59:28 首次发布

本文链接：https://blog.csdn.net/weixin_55862915/article/details/131829212

该代码示例展示了如何使用JavaScript实现web页面的打印功能，并监听打印按钮的点击事件。通过创建iframe，将要打印的内容注入iframe中，然后设置打印前和打印后的回调函数，最后调用打印窗口。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

咱话不多说，这是比较完整的实现web打印与监听打印按钮的代码示例，希望可以帮助到你

 toPrintPayment() {
 	  //需要打印的内容
      const printContent = document.querySelector('.paymentContain').outerHTML
      const iframe = document.createElement('iframe')
      iframe.setAttribute('style', 'position: absolute; width: 0; height: 0;')
      document.body.appendChild(iframe)

      const iframeDoc = iframe.contentWindow.document
      
      //iframeDoc的样式
      iframeDoc.write(`<style media="print">
      @page {
        size: auto;
        margin: 0mm;
      }
     .PageNext{page-break-after: always;}
      </style>`)
      
	 //iframeDoc的dom结构
      iframeDoc.write(
        '<div>' +
          printContent +
        '</div>'
      )
      
      let beforePrint = function () {
        console.log('打印前')
      }
      //定义打印后事件
      let afterPrint = function () {
        console.log('打印后')
      }
      
      if (iframe.contentWindow) {
        //打印前事件
        iframe.contentWindow.onbeforeprint = beforePrint
        //打印后事件
        iframe.contentWindow.onafterprint = afterPrint
      }
      setTimeout(function () {
        //.print()打开打印窗口
        iframe.contentWindow?.print()
        //这里的iframe只是为了给浏览器提供一个打印的对象，打印窗口打开后，记得从<body> </body>移除
        document.body.removeChild(iframe)
      }, 300)
    },