【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. 在需要打印的位置使用
<div id="dialogContent">
  <p style="text-align: center">
    {{ form.status === '条件' ? '标题一' : '标题二' }}
  </p>
  <div class="table-layout">
    <!--内容-->
  </div>
</div>

4. 打印
<button v-print="'#dialogContent'">打印</button>

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

方法二：print.js

源码地址

1. 安装依赖
cnpm install vuePlugs_printjs -S

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

3. 使用
<template>
    <div ref="print">
    <!--打印内容-->
    <div class="no-print">不要打印我</div>
    </div>
    <a-button @click="prints">打印</a-button>
</template>
<script>
export default {
  data () {
    return {}
  },
  methods: {
    prints () {
      this.$print(this.$refs.print)
    }
  }
}
</script>

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

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

<div class="no-print">不要打印我</div>

方法二. 自定义类名

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