vue实现打印功能的两种方法


Posted in Javascript onSeptember 07, 2018

第一种方法:通过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>



<p>谁知盘中餐</p>



<p>粒粒皆辛苦</p>


</div>


<button v-print="'#printTest'">打印</button>

如果内容打印不全,在打印操作时点击更多设置,然后设置缩放

vue实现打印功能的两种方法

第二种方法:手动下载插件到本地

插件地址: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) // 使用

注意事项 需使用ref获取dom节点,若直接通过id或class获取则webpack打包部署后打印内容为空

指定不打印区域

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

提示,github上有一个错误如下,避免踩坑,($ref 会报错,print undefind ;  改为 $refs 就好了)

vue实现打印功能的两种方法

总结

以上所述是小编给大家介绍的vue实现打印功能的两种方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery 性能优化指南 (1)
May 21 Javascript
Prototype的Class.create函数解析
Sep 22 Javascript
jquery全选/全不选/反选另一种实现方法(配合原生js)
Apr 07 Javascript
jquery实现图片左右间隔滚动特效(可自动播放)
May 08 Javascript
jquery实现LED广告牌旋转系统图片切换效果代码分享
Aug 26 Javascript
vue2.0+webpack环境的构造过程
Nov 08 Javascript
js实现右键自定义菜单
Dec 03 Javascript
Vue项目全局配置页面缓存之按需读取缓存的实现详解
Aug 01 Javascript
使用layer弹窗和layui表单实现新增功能
Aug 09 Javascript
JS 正则表达式验证密码、邮箱格式的实例代码
Oct 28 Javascript
js实现一个简易计算器
Mar 30 Javascript
如何通过Proxy实现JSBridge模块化封装
Oct 22 Javascript
使用Angular-CLI构建NPM包的方法
Sep 07 #Javascript
详解如何构建一个Angular6的第三方npm包
Sep 07 #Javascript
vue2.0 可折叠列表 v-for循环展示的实例
Sep 07 #Javascript
Js中使用正则表达式验证输入是否有特殊字符
Sep 07 #Javascript
vue.js+element-ui动态配置菜单的实例
Sep 07 #Javascript
详解npm 配置项registry修改为淘宝镜像
Sep 07 #Javascript
vue 点击按钮实现动态挂载子组件的方法
Sep 07 #Javascript
You might like
PHP 开发工具
2006/12/06 PHP
PHPStrom中实用的功能和快捷键大全
2015/09/23 PHP
PHP实现导出excel数据的类库用法示例
2016/10/15 PHP
如何在PHP环境中使用ProtoBuf数据格式
2020/06/19 PHP
利用WebBrowser彻底解决Web打印问题(包括后台打印)
2009/06/22 Javascript
JavaScript XML和string相互转化实现代码
2011/07/04 Javascript
讲解JavaScript中for...in语句的使用方法
2015/06/03 Javascript
把Node.js程序加入服务实现随机启动
2015/06/25 Javascript
node.js回调函数之阻塞调用与非阻塞调用
2015/11/13 Javascript
酷炫jQuery全屏3D焦点图动画效果
2016/03/22 Javascript
servlet+jquery实现文件上传进度条示例代码
2017/01/25 Javascript
jQuery实现选项卡功能(两种方法)
2017/03/08 Javascript
ES6学习笔记之Set和Map数据结构详解
2017/04/07 Javascript
vue 1.x 交互实现仿百度下拉列表示例
2017/10/21 Javascript
Angular项目如何升级至Angular6步骤全纪录
2018/09/03 Javascript
Vue项目部署在Spring Boot出现页面空白问题的解决方案
2018/11/26 Javascript
微信小程序 多行文本显示...+显示更多按钮和收起更多按钮功能
2019/09/26 Javascript
Python实现对百度云的文件上传(实例讲解)
2017/10/21 Python
利用Pandas 创建空的DataFrame方法
2018/04/08 Python
Tensorflow 查看变量的值方法
2018/06/14 Python
Python使用os.listdir()和os.walk()获取文件路径与文件下所有目录的方法
2019/04/01 Python
Python检查图片是否损坏及图片类型是否正确过程详解
2019/09/30 Python
python各层级目录下import方法代码实例
2020/01/20 Python
Tensorflow矩阵运算实例(矩阵相乘,点乘,行/列累加)
2020/02/05 Python
django的模型类管理器——数据库操作的封装详解
2020/04/01 Python
Python之Matplotlib文字与注释的使用方法
2020/06/18 Python
html5 canvas移动浏览器上实现图片压缩上传
2016/03/11 HTML / CSS
欧迪办公美国官网:Office Depot
2016/08/22 全球购物
网络信息管理员岗位职责
2014/01/05 职场文书
关于运动会的稿件
2014/02/02 职场文书
团干部培训方案
2014/06/03 职场文书
商务宴请邀请函范文
2015/02/02 职场文书
培训督导岗位职责
2015/04/10 职场文书
2015年小学实验室工作总结
2015/07/28 职场文书
入党申请书怎么写?
2019/06/21 职场文书
中学生打架检讨书之500字
2019/08/06 职场文书