zoukankan      html  css  js  c++  java
  • 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'}) // 使用
    
  • 相关阅读:
    vue中常用的属性标签
    Vue 基本简介
    ES6 Map 和 WeakMap
    ES6 set/weakset
    ES6 generator生成器函数 async
    ES6 promise对象
    信息论-熵-随机变量-泛函
    机器学习一
    RS-232接口
    图的存储结构
  • 原文地址:https://www.cnblogs.com/sysg/p/12486913.html
Copyright © 2011-2022 走看看