vue element 如何打印弹窗里的内容?

fanxk1014
  • 3
新手上路,请多包涵

用vue-element里的dialog组件,在弹窗内显示一个表单,并用一个打印按钮,打印该表单。
打印用了window.print()这个方法。
因为只打印页面中弹窗内的部分,所以将id为dialogContent的div替换了原body的innerHTML,打印后再替换为原本的body,代码如下:

var oldHtml = document.body.innerHTML;
document.body.innerHTML = document.getElementById("dialogContent").innerHTML;
window.print();
document.body.innerHTML = oldHtml;

网上的这个方法,遇到两个问题
1、第一次能打开打印界面,但是关闭后,就无法第二次打开了,而且页面也无法进行任何操作。
2、并且由于表单宽度问题,表单的内容,右边的一半没有被显示在打印界面。

这是打印界面显示的样子,右侧的一半被砍掉了、、

请问该怎么解决??

回复
阅读 8.1k
3 个回答

innerHMTL会造成绑定丢失,可以window.open(''),写入document.write(dialogdome)打开新页面来打印,就是体验...,
或者尝试将其它元素隐藏

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏