难度值：⭐
需求描述：使用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'}) // 使用
