vue實現打印功能

一、vue-print-nb

1.安裝依賴 vue-print-nb

cnpm i vue-print-nb -S

2.在mian.js中引入

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

3.在頁面中使用

<div id="printTest" >
    <p>test1</p>
    <p>test1</p>
</div>
<button v-print="'#printTest'">打印</button>

缺點：
只能打印可見區域，不能分頁打印

二、print.js

1. 下載源碼

https://github.com/xyl66/vuePlugs_printjs

2. 在mian.js中引入

import Print from '@/plugins/print'
Vue.use(Print)

 

3. 在頁面中使用

<template>
    <div ref="print">
    打印內容
    <div class="no-print">不要打印我</div>
    </div>
    <a-button @click="prints">打印</a-button>
</template>
<script>
export default {
  data () {
    return {}
  },
  methods: {
    prints () {
      this.$print(this.$refs.print)
    }
  }
}
</script>

注意事項 需使用ref獲取dom節點，若直接通過id或class獲取則webpack打包部署后打印內容為空 指定不打印區域 方法一. 添加no-print樣式類

<div class="no-print">不要打印我</div>

方法二. 自定義類名

<div class="do-not-print-me-xxx">不要打印我</div>
this.$print(this.$refs.print,{'no-print':'.do-not-print-me-xxx'}) // 使用