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