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 相关文章推荐
js版本A*寻路算法
Dec 22 Javascript
JavaScript学习历程和心得小结
Aug 16 Javascript
Json2Template.js 基于jquery的插件 绑定JavaScript对象到Html模板中
Oct 29 Javascript
关于jQuery中的each方法(jQuery到底干了什么)
Mar 05 Javascript
JavaScript实现在数组中查找不同顺序排列的字符串
Sep 26 Javascript
javascript制作网页图片上实现下雨效果
Feb 26 Javascript
JQuery限制复选框checkbox可选中个数的方法
Apr 20 Javascript
jQuery中常用动画效果函数(日常整理)
Sep 17 Javascript
D3.js实现饼状图的方法详解
Sep 21 Javascript
简化vuex的状态管理方案的方法
Jun 02 Javascript
vue 对象添加或删除成员时无法实时更新的解决方法
May 01 Javascript
微信小程序动画组件使用解析,类似vue,且更强大
Aug 01 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递归函数中使用return的注意事项
2014/01/17 PHP
php使用GD库创建图片缩略图的方法
2015/06/10 PHP
Zend Framework实现多服务器共享SESSION数据的方法
2016/03/22 PHP
PHP安全下载文件的方法
2016/04/07 PHP
PHP设计模式之策略模式原理与用法实例分析
2019/04/04 PHP
javascript英文日期(有时间)选择器
2007/05/02 Javascript
容易被忽略的JS脚本特性
2011/09/13 Javascript
js 操作select和option常用代码整理
2012/12/13 Javascript
JavaScript获取FCK编辑器信息的具体方法
2013/07/12 Javascript
javascript 实现键盘上下左右功能的小例子
2013/09/15 Javascript
JavaScript中的正则表达式简明总结
2014/04/04 Javascript
使用npm发布Node.JS程序包教程
2015/03/02 Javascript
javascript跨域原因以及解决方案分享
2015/04/08 Javascript
使用iojs的jsdom库实现同步系统时间
2015/04/20 Javascript
jQuery时间轴插件使用详解
2015/07/16 Javascript
js创建对象的方法汇总
2016/01/07 Javascript
JavaScript中的跨浏览器事件操作的基本方法整理
2016/05/20 Javascript
在bootstrap中实现轮播图实例代码
2017/06/11 Javascript
JavaScript requestAnimationFrame动画详解
2017/09/14 Javascript
使用elementUI实现将图片上传到本地的示例
2018/09/04 Javascript
vue 2.1.3 实时显示当前时间,每秒更新的方法
2018/09/16 Javascript
详解webpack打包nodejs项目(前端代码)
2018/09/19 NodeJs
基于layui轮播图满屏是高度自适应的解决方法
2019/09/16 Javascript
vue项目中使用bpmn为节点添加颜色的方法
2020/04/30 Javascript
Js实现粘贴上传图片的原理及示例
2020/12/09 Javascript
用Python创建声明性迷你语言的教程
2015/04/13 Python
python 打印对象的所有属性值的方法
2016/09/11 Python
使用TensorFlow实现二分类的方法示例
2019/02/05 Python
django框架实现模板中获取request 的各种信息示例
2019/07/01 Python
python2使用bs4爬取腾讯社招过程解析
2019/08/14 Python
html2canvas截图空白问题的解决
2020/03/24 HTML / CSS
亚马逊意大利站点:Amazon.it
2020/12/31 全球购物
教师纪念9.18事件演讲稿范文
2014/09/14 职场文书
2015年行政助理工作总结
2015/04/30 职场文书
python编写函数注意事项总结
2021/03/29 Python
mysql多表查询-笔记七
2021/04/05 MySQL