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函數裏面就能夠控制相關邏輯或者事件

這種方法就完美解決了個人需求