【vue+elementui】打印dialog弹窗内容

难度值：⭐

需求描述：使用vue+elmentui，打印dialog弹窗里面的内容

方法一： PASS

let oldHtml = document.body.innerHTML
document.body.innerHTML = document.getElementById('dialogContent').innerHTML
window.print()
document.body.innerHTML = oldHtml

代码如上，dialogContent 指代的是需要打印的内容区域，因为只打印页面中弹窗内的部分，所以将id为dialogContent的div替换了原body的innerHTML，打印后再替换为原本的body

但是在打印过程中，遇到了一个问题
1、初次打印，可以打印页面，但是打印完毕后，页面按钮全部失灵且无法再进行任何操作了

原因：
猜测可能是因为innerHTML造成动态绑定事件丢失的原因
查资料，大部分建议是使用appendChild()替代innerHTML，无奈水平有限，尝试了几次后还是没有折腾出来

方法二：vue-print-nb

1. 安装依赖
cnpm i vue-print-nb -S

2. 在main.js/index.js里面引入
import Print from 'vue-print-nb'
Vue.use(Print)

3. 在需要打印的位置使用

  

    {{ form.status === '条件' ? '标题一' : '标题二' }}
  
  

    
  


4. 打印
打印

缺点：
只能打印可见区域，不能分页打印

方法二：print.js

源码地址

1. 安装依赖
cnpm install vuePlugs_printjs -S

2. 引入
import Print from '@/plugins/print'   // 下载到本地地址
Vue.use(Print)

3. 使用

注意：
需使用ref获取dom节点，若直接通过id或class获取则webpack打包部署后打印内容为空

指定不打印区域
方法一. 添加no-print样式类

不要打印我

方法二. 自定义类名

不要打印我
this.$print(this.$refs.print,{'no-print':'.do-not-print-me-xxx'}) // 使用