window.print打印事件,固定打印界面,打印成功或取消返回打印前界面,再次点击打印事件不生效
2024-01-07 17:26:30
我是弹框中有打印,然后如果还原界面后在点打印事件不生效
我用 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()
文章来源:https://blog.csdn.net/weixin_49066399/article/details/135437882
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!