難度值：?
需求描述：使用vue+elmentui脉让，打印dialog彈窗里面的內(nèi)容
方法一： PASS
let oldHtml = document.body.innerHTML
document.body.innerHTML = document.getElementById('dialogContent').innerHTML
window.print()
document.body.innerHTML = oldHtml
代碼如上，dialogContent 指代的是需要打印的內(nèi)容區(qū)域柿冲，因為只打印頁面中彈窗內(nèi)的部分，所以將id為dialogContent的div替換了原body的innerHTML，打印后再替換為原本的body
但是在打印過程中壶栋，遇到了一個問題
1、初次打印普监，可以打印頁面贵试，但是打印完畢后，頁面按鈕全部失靈且無法再進行任何操作了
原因：
猜測可能是因為innerHTML造成動態(tài)綁定事件丟失的原因
查資料凯正，大部分建議是使用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">
<!--內(nèi)容-->
</div>
</div>
4. 打印
<button v-print="'#dialogContent'">打印</button>
缺點：
只能打印可見區(qū)域廊散，不能分頁打印
方法二：print.js
1. 安裝依賴
cnpm install vuePlugs_printjs -S
2. 引入
import Print from '@/plugins/print' // 下載到本地地址
Vue.use(Print)
3. 使用
<template>
<div ref="print">
<!--打印內(nèi)容-->
<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節(jié)點桑滩，若直接通過id或class獲取則webpack打包部署后打印內(nèi)容為空
指定不打印區(qū)域
方法一. 添加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'}) // 使用
