1.安裝插件
npm install vue-print-nb --save
2.在main.js文件中注冊(cè)
import Print from 'vue-print-nb'
Vue.use(Print);
3.封裝成組件
<template>
<div>
<div id="printMe" style="background: pink">
<p>葫蘆娃，葫蘆娃</p>
<p>一根藤上七朵花</p>
<p>小小樹藤是我家 啦啦啦啦</p>
<p>叮當(dāng)當(dāng)咚咚當(dāng)當(dāng) 澆不大</p>
<p>叮當(dāng)當(dāng)咚咚當(dāng)當(dāng) 是我家</p>
<p>啦啦啦啦</p>
<p>...</p>
</div>
<el-button type="primary" v-print="'#printMe'">打印</el-button>
</div>
</template>
<script>
export default {};
</script>
<style></style>
4.在父組件中使用
(1)導(dǎo)入
import Print from "./components/print/PrintMe";
(2)注冊(cè)
components:{
Print
}
(3)在template中使用
<template>
<div>
<h1>我是首頁</h1>
<Print></Print>
</div>
</template>
當(dāng)我們?cè)谑醉擖c(diǎn)擊打印按鈕的時(shí)候惩淳，就會(huì)出現(xiàn)下圖所示的這個(gè)頁面:
dayin.png
點(diǎn)擊打印按鈕即可打印所需要打印的內(nèi)容
如果圖表中有echarts的話兔院，vue-print-nb是沒有辦法正常打印ecahrts圖的，這個(gè)時(shí)候我們可以使用
"vue-print-nb-jeecg": "^1.0.11",就可以將echarts圖也正確的打印出來啦
