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'}) // 使用