window.print打印事件,固定打印界面,打印成功或取消返回打印前界面,再次点击打印事件不生效

我是弹框中有打印,然后如果还原界面后在点打印事件不生效
我用 window.location.reload() 后刷新界面有返回的界面是关闭了弹框。我需要的是打印成功或取消返回打印不关闭弹框

之前打印代码
我这是是vue3 ,我打印界面是单独写的

      <printPag ref="printPagRef" id="printPag" v-show="false" ></printPag>

js 代码

 // 获取当前页面dow
 var currentHtml = window.document.body.innerHTML;
//这里是获取我需要打印的dom 元素
let wpt = state["printPagRef"].$el;
 let newContent = wpt.innerHTML;
 
 document.body.innerHTML = newContent;
 window.print()
 // 返回原界面,这样确实可以还原到当前界面但是再次点击打印,不生效
 window.document.body.innerHTML = currentHtml;
 //在网上查了一下让加一个刷新页面 试了,但是这样就不能还原到打印前的界面
 window.location.reload();

下面是我当前解决的方法代码

创建iframe,这里需要注意:打印界面的样式需要写为行内样式才生效,如果用calss 它不生效

//这里是获取我需要打印的dom 元素
let wpt = state["printPagRef"].$el;
 let newContent = wpt.innerHTML;
 //创建iframe
        const iframeEl = document.createElement("iframe");
        iframeEl.class = "iframe";
        //将元素放置最底层,防止其覆盖了其他元素
        iframeEl.style.position = "fixed";
        iframeEl.style.zIndex = -99;
        //添加到页面
        document.querySelector("body").append(iframeEl);
  const documentEl = iframeEl.contentDocument;
  //把打印dom元素赋值给iframe
        documentEl.body.innerHTML = newContent;
     iframeEl.contentWindow.print()   
  • 7
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
要实现获取二维码图片并打印,可以按照以下步骤: 1. 使用 JavaScript 将二维码图片转换为 base64 编码的字符串。可以使用一个第三方库如 `qrcode.js` 来生成二维码图片并将其转换为 base64 编码。 2. 调用 `window.print()` 方法打印页面,其中二维码图片作为一个 `<img>` 元素插入到页面中。 3. 监听 `window` 对象的 `beforeprint` 和 `afterprint` 事件,以便在打印打印后执行相应的操作。 4. 在 `beforeprint` 事件中,可以弹出一个确认框,让用户确认是否要打印二维码图片。如果用户选择取消打印,则可以使用 `event.preventDefault()` 方法取消打印操作。 下面是一个示例代码: ```html <!DOCTYPE html> <html> <head> <title>Print QR Code</title> </head> <body> <h1>Print QR Code</h1> <div id="qrcode"></div> <button id="print-btn">Print</button> <script src="https://cdn.staticfile.org/qrcode-generator/1.4.4/qrcode.min.js"></script> <script> // 生成二维码图片并转换为 base64 编码 var qrcode = new QRCode(document.getElementById("qrcode"), { width: 200, height: 200 }); qrcode.makeCode("https://www.example.com"); var qrimg = document.getElementById("qrcode").getElementsByTagName("img")[0]; var qrdata = qrimg.src.split(",")[1]; // 监听打印事件 window.addEventListener("beforeprint", function(event) { // 弹出确认框,让用户确认是否要打印二维码图片 if (!confirm("Do you want to print the QR code?")) { // 取消打印操作 event.preventDefault(); } }); window.addEventListener("afterprint", function(event) { // 打印完成后的操作 alert("Printing completed."); }); // 绑定打印按钮的点击事件 document.getElementById("print-btn").addEventListener("click", function() { // 插入二维码图片 var img = document.createElement("img"); img.src = "data:image/png;base64," + qrdata; document.body.appendChild(img); // 打印页面 window.print(); }); </script> </body> </html> ``` 在上面的示例中,当用户点击Print”按钮时,会将二维码图片插入到页面中,并且调用 `window.print()` 方法打印页面。在打印会弹出一个确认框,让用户确认是否要打印二维码图片。如果用户选择取消打印,则会取消打印操作。在打印完成后,会弹出一个提示框提示打印已完成。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值