Vue

vue实现打印功能的方法

联系站长 作者:web知道 来源:未知 2019-01-04 09:25 我要评论

这篇文章主要介绍了vue实现打印功能的方法,文中通过两种方法给大家介绍了指定不打印区域的解决方法,需要的朋友可以参...

方法:手动下载插件到本地
githtb地址:https://github.com/xyl66/vuePlugs_printjs
本站地址:点击下载
 
在src下新建文件夹plugs,将下载好的print.js放入plugs文件夹下,然后操作如下
 
import Print from '@/plugs/print'
Vue.use(Print) // 注册
<template>
<section ref="print"> 打印内容
<div class="no-print">不要打印我</div>
</section>
</template>

this.$print(this.$refs.print) // 使用 

使用方式:
 <button @click="printContent" >点击打印</button>

methods: {
        printContent(){
              this.$print(this.$refs.print)
        }
}

 
注意事项 需使用ref获取dom节点,若直接通过id或class获取则webpack打包部署后打印内容为空
 
指定不打印区域
方法1. 添加no-print样式类
1、<div class="no-print">不要打印我</div> 
 
方法2. 自定义类名
2、 <div class="do-not-print-me-xxx">不要打印我</div>this.$print(this.$refs.print,{'no-print':'.do-not-print-me-xxx'}) // 使用 
提示,github上有一个错误如下,避免踩坑,($ref 会报错,print undefind ;  改为 $refs 就好了)
 
 



本文如有侵犯版权请联系站长删除。

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源;3.作者投稿可能会经我们编辑修改或补充。

相关文章
网友点评