vue实现打印功能的两种方法
2019-09-23 14:51
1886 查看
原文链接:http://www.cnblogs.com/dhpong/p/10500370.html
第一种方法:通过npm 安装插件
1,安装 npm install vue-print-nb --save
2,引入 安装好以后在main.js文件中引入
import Print from 'vue-print-nb'
Vue.use(Print); //注册
3,现在就可以使用了
<div id="printTest" > <p>明月照于山间</p> <p>清风来于江上 </p> </div> <button v-print="'#printTest'">打印</button>
4.如需通过链接地址打印:window.location.href = airway_bill; airway_bill为链接地址。
5.如果内容打印不全,在打印操作时点击更多设置,然后设置缩放。
第二种方法:手动下载插件到本地
插件地址:https://github.com/xyl66/vuePlugs_printjs
1.在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) // 使用
2.注意事项 需使用ref获取dom节点,若直接通过id或class获取则webpack打包部署后打印内容为空
3.指定不打印区域
方法1. 添加no-print样式类
<div class="no-print">不要打印我</div>
方法2. 自定义类名
<div class="do-not-print-me-xxx">不要打印我</div>
this.$print(this.$refs.print,{'no-print':'.do-not-print-me-xxx'}) // 使用
转载于:https://www.cnblogs.com/dhpong/p/10500370.html
相关文章推荐
- vue实现打印功能的两种方法
- 两种方法实现从尾到头打印链表--栈和递归
- iOS应用实现评论功能的两种方法
- vue 两种文档下载方法的实现(后台传递文件流,后台返回文件下载地址)
- Java编程之TreeSet排序两种解决方法(1)元素自身具备比较功能,元素需要实现Comparable接口覆盖compare(2)创建根据自定义Person类的name进行排序的Comparator
- Vue中使用Froala Editor时,外部方法调用html.insert()插入内容到光标最后停留位置功能实现
- 使vue实现jQuery调用的两种方法
- 简述虚拟打印功能的实现方法。
- Vue中使用Froala Editor时,外部方法调用html.insert()插入内容到光标最后停留位置功能实现
- vue.js实现备忘录功能的方法
- elementUI Vue 单个按钮显示和隐藏的变换功能(两种方法)
- Vue动态面包屑功能的实现方法
- 两种方法实现:输入一个链表,从尾到头打印链表每个节点的值
- iOS应用实现评论功能的两种方法
- Vue中使用Froala Editor时,外部方法调用html.insert()插入内容到光标最后停留位置功能实现
- iOS实现图片压缩的两种方法及图片压缩上传功能
- vue获取DOM元素并设置属性的两种实现方法
- java在线聊天项目0.3版本 制作客户端窗体,实现发送按钮和回车发送信息功能,使用ActionListener监听事件中actionPerformed方法(用内部类和匿名内部类两种方法)
- 原生js实现的局部页面打印功能,可以适用vue和jq
- VUE 实现复制内容到剪贴板的两种方法