1.安装插件
npm install vue-print-nb --save
2.在main.js文件中注册
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>叮当当咚咚当当 浇不大</p>
<p>叮当当咚咚当当 是我家</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)导入
import Print from "./components/print/PrintMe";
(2)注册
components:{
Print
}
(3)在template中使用
<template>
<div>
<h1>我是首页</h1>
<Print></Print>
</div>
</template>
当我们在首页点击打印按钮的时候，就会出现下图所示的这个页面:
dayin.png
点击打印按钮即可打印所需要打印的内容
如果图表中有echarts的话，vue-print-nb是没有办法正常打印ecahrts图的，这个时候我们可以使用
"vue-print-nb-jeecg": "^1.0.11",就可以将echarts图也正确的打印出来啦
