利用 vue-print-nb插件实现打印功能

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图也正确的打印出来啦