vue-print打印

目前工做的项目须要使用到打印，用的是vue.js框架

最开始使用的打印插件有个bug，就是分页的时候若是有些数据恰好跨进分页的位置，就会形成下图的数据丢失的问题

因此更换了打印插件

第一种 vue-print-nb 打印：

    1.安装插件npm install vue-print-nb --save

    2.在main.js引入插件

import Print from 'vue-print-nb'
Vue.use(Print)

    3.给须要打印的最外层元素添加id

<div id="printPage" :style="printTable ? 'width:1175px;' : ''">

    4.添加打印的点击事件

<button v-print="'#printMe'">打印</button>

这个时候只要点击此按钮就能显示出打印的设置及内容

这种方法有个缺陷，就是难以经过js控制打印以前或者以后的一些事件

第二种方法print.js打印：

1.下载 Print.js ,放到/src/plugs文件夹下

2.main.js引入插件

import Print from '@/plugs/print'

Vue.use(Print)

3.给须要打印的最外层元素添加ref 

<div ref="printPage" :style="printTable ? 'width:1175px;' : ''">

4.设置打印按钮及编写打印函数

<el-button type="primary" size="mini" @click="print()" >打印</el-button>

print() {
  this.$print(this.$refs.printPage)
}

this.$print(this.$refs.printPage) //这就是执行打印操做，调用起浏览器打印机

这样js函数里面就能够控制相关逻辑或者事件

这种方法就完美解决了个人需求