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新手语法小结
Jun 15 Javascript
JavaScript 通过模式匹配实现重载
Aug 12 Javascript
关于IE浏览器以及Firefox下的javascript冒泡事件的响应层级
Oct 14 Javascript
jquery动态改变div宽度和高度
Feb 09 Javascript
CSS3实现动态背景登录框的代码
Jul 28 Javascript
JS实现对中文字符串进行utf-8的Base64编码的方法(使其与Java编码相同)
Jun 21 Javascript
全面了解JavaScirpt 的垃圾(garbage collection)回收机制
Jul 11 Javascript
JS转换HTML转义符的方法
Aug 24 Javascript
jQuery排序插件tableSorter使用方法
Feb 10 Javascript
node通过express搭建自己的服务器
Sep 30 Javascript
如何基于jQuery实现五角星评分
Sep 02 jQuery
jQuery zTree如何改变指定节点文本样式
Oct 16 jQuery
使用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中怎样保持SESSION不过期 原理及方案介绍
2013/08/08 PHP
PHP实现转盘抽奖算法分享
2020/04/15 PHP
PHP封装mysqli基于面向对象的mysql数据库操作类与用法示例
2019/02/25 PHP
详解PHP PDO简单教程
2019/05/28 PHP
JavaScript 类的定义和引用 JavaScript高级培训 自定义对象
2010/04/27 Javascript
通过jQuery源码学习javascript(三)
2012/12/27 Javascript
jquery实现div拖拽宽度示例代码
2013/07/31 Javascript
javascript匿名函数实例分析
2014/11/18 Javascript
JS实现让访问者自助选择网页文字颜色的方法
2015/02/24 Javascript
javascript中hasOwnProperty() 方法使用指南
2015/03/09 Javascript
JavaScript判断字符长度、数字、Email、电话等常用判断函数分享
2015/04/01 Javascript
使用CoffeeScrip优美方式编写javascript代码
2015/10/28 Javascript
Vue.js实现一个自定义分页组件vue-paginaiton
2016/09/05 Javascript
Jquery通过ajax请求NodeJS返回json数据实例
2016/11/08 NodeJs
js中数组插入、删除元素操作的方法
2017/02/15 Javascript
基于jstree使用AJAX请求获取数据形成树
2017/08/29 Javascript
React 无状态组件(Stateless Component) 与高阶组件
2018/08/14 Javascript
vue中如何实现后台管理系统的权限控制的方法示例
2018/09/19 Javascript
element-ui如何防止重复提交的方法步骤
2019/12/09 Javascript
jQuery 淡入/淡出效果函数用法分析
2020/05/19 jQuery
[23:18]Spirit vs Liquid Supermajor小组赛A组 BO3 第二场 6.2
2018/06/03 DOTA
在Python web中实现验证码图片代码分享
2017/11/09 Python
tensorflow使用神经网络实现mnist分类
2018/09/08 Python
python3+requests接口自动化session操作方法
2018/10/13 Python
把JSON数据格式转换为Python的类对象方法详解(两种方法)
2019/06/04 Python
Python学习笔记之While循环用法分析
2019/08/14 Python
python 函数嵌套及多函数共同运行知识点讲解
2020/03/03 Python
IE9对HTML5中部分属性不支持的原因分析
2014/10/15 HTML / CSS
《绿色蝈蝈》教学反思
2014/03/02 职场文书
2014三八妇女节活动总结范文四篇
2014/03/09 职场文书
八一建军节演讲稿
2014/09/10 职场文书
迎新生晚会主持词
2015/06/30 职场文书
幼儿园小朋友毕业感言
2015/07/30 职场文书
生日宴会祝酒词
2015/08/10 职场文书
深度好文:50条没人告诉你的人生经验,句句精辟
2019/08/22 职场文书
python文件与路径操作神器 pathlib
2022/04/01 Python