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 相关文章推荐
JavaScript页面刷新与弹出窗口问题的解决方法
Mar 02 Javascript
Jquery颜色选择器ColorPicker实现代码
Nov 14 Javascript
js左侧三级菜单导航实例代码
Sep 13 Javascript
javascript笛卡尔积算法实现方法
Apr 08 Javascript
js实现iframe框架取值的方法(兼容IE,firefox,chrome等)
Nov 26 Javascript
jQuery实现只允许输入数字和小数点的方法
Mar 02 Javascript
多种jQuery绑定事件的实现方式
Jun 13 Javascript
原生js实现对Ajax的封装(仿jquery)
Jan 22 Javascript
Bootstrap模态框使用详解
Feb 15 Javascript
实现微信小程序的wxml文件和wxss文件在webstrom的支持
Jun 12 Javascript
微信打开网址添加在浏览器中打开提示的办法
May 20 Javascript
高性能js数组去重(12种方法,史上最全)
Dec 21 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计数器的实现代码
2013/06/08 PHP
Yii实现自动加载类地图的方法
2015/04/01 PHP
PHP命名空间与自动加载机制的基础介绍
2019/08/25 PHP
JavaScript开发时的五个注意事项
2007/12/08 Javascript
JQuery读取XML文件数据并显示的实现代码
2009/12/16 Javascript
各情景下元素宽高的获取实现代码
2011/09/13 Javascript
javascript延时加载之defer测试
2012/12/28 Javascript
js函数调用的方式
2014/05/06 Javascript
jQuery事件绑定与解除绑定实现方法
2015/04/15 Javascript
JQuery Dialog对话框 不能通过Esc关闭的原因分析及解决办法
2017/01/18 Javascript
mui上拉加载更多下拉刷新数据的封装过程
2017/11/03 Javascript
jQuery第一次运行页面默认触发点击事件的实例
2018/01/10 jQuery
js和jQuery以及easyui实现对下拉框的指定赋值方法
2018/01/23 jQuery
React Native使用fetch实现图片上传的示例代码
2018/03/07 Javascript
jQuery 点击获取验证码按钮及倒计时功能
2018/09/20 jQuery
vue计算属性computed、事件、监听器watch的使用讲解
2019/01/21 Javascript
[15:58]DOTA2国际邀请赛采访专栏:Tongfu.Sansheng&KingJ,DK.rOtk
2013/08/08 DOTA
[48:02]Ti4循环赛第三日 VG vs Liquid和NEWBEE vs DK
2014/07/12 DOTA
Python实现图像几何变换
2015/07/06 Python
Python中在脚本中引用其他文件函数的实现方法
2016/06/23 Python
python实现守护进程、守护线程、守护非守护并行
2018/05/05 Python
python爬虫实例详解
2018/06/19 Python
用pycharm开发django项目示例代码
2018/10/24 Python
Python 实现域名解析为ip的方法
2019/02/14 Python
python的pygal模块绘制反正切函数图像方法
2019/07/16 Python
Python3 列表,数组,矩阵的相互转换的方法示例
2019/08/05 Python
python取均匀不重复的随机数方式
2019/11/27 Python
python matplotlib包图像配色方案分享
2020/03/14 Python
在HTML5 Canvas中放入图片和保存为图片的方法
2014/05/03 HTML / CSS
印度尼西亚手表和包包商店:Urban Icon
2019/12/12 全球购物
中学实习教师自我鉴定
2013/12/12 职场文书
专科生就业求职信
2014/06/22 职场文书
2014年环卫工作总结
2014/11/22 职场文书
教师年度考核个人总结
2015/02/12 职场文书
2016继续教育培训学习心得体会
2016/01/19 职场文书
2016年“12.4”法制宣传日活动总结
2016/04/01 职场文书