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 Select下拉列表框进行多选、移除、交换内容的具体实现方法
Aug 13 Javascript
javascript验证身份证完全方法具体实现
Nov 18 Javascript
javascript修改表格背景色实例代码分享
Dec 10 Javascript
键盘上一张下一张兼容IE/google/firefox等浏览器
Jan 28 Javascript
Bootstrap布局组件教程之Bootstrap下拉菜单
Jun 12 Javascript
JavaScript注册时密码强度校验代码
Jun 30 Javascript
详解在Angular项目中添加插件ng-bootstrap
Jul 04 Javascript
shiro授权的实现原理
Sep 21 Javascript
es6系列教程_ Map详解以及常用api介绍
Sep 25 Javascript
使用JSON格式提交数据到服务端的实例代码
Apr 01 Javascript
jquery实现弹窗(系统提示框)效果
Dec 10 jQuery
解决vue scoped html样式无效的问题
Oct 24 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
PHP4实际应用经验篇(6)
2006/10/09 PHP
PHP读取汉字的点阵数据
2015/06/22 PHP
php如何实现只替换一次或N次
2015/10/29 PHP
基于 Swoole 的微信扫码登录功能实现代码
2018/01/15 PHP
如何在PHP中使用AES加密算法加密数据
2020/06/24 PHP
JavaScript RegExp方法获取地址栏参数(面向对象)
2009/03/10 Javascript
jquery动画4.升级版遮罩效果的图片走廊--带自动运行效果
2012/08/24 Javascript
浅析document.createDocumentFragment()与js效率
2013/07/08 Javascript
javascript内置对象arguments详解
2014/03/16 Javascript
使用AngularJS创建自定义的过滤器的方法
2015/06/18 Javascript
JS+CSS实现的漂亮渐变背景特效代码(6个渐变效果)
2016/03/25 Javascript
jquery实现跳到底部,回到顶部效果的简单实例(类似锚)
2016/07/10 Javascript
JS自动生成动态HTML验证码页面
2017/06/14 Javascript
JavaScript解析任意形式的json树型结构展示
2017/07/23 Javascript
详解Js中的模块化是如何实现的
2017/10/18 Javascript
谈谈JavaScript中的函数
2020/09/08 Javascript
Python使用MONGODB入门实例
2015/05/11 Python
Python验证文件是否可读写代码分享
2017/12/11 Python
python 日志增量抓取实现方法
2018/04/28 Python
python爬取指定微信公众号文章
2018/12/20 Python
Atom Python 配置Python3 解释器的方法
2019/08/28 Python
python系统指定文件的查找只输出目录下所有文件及文件夹
2020/01/19 Python
常用python爬虫库介绍与简要说明
2020/01/25 Python
python 遗传算法求函数极值的实现代码
2020/02/11 Python
基于Pyinstaller打包Python程序并压缩文件大小
2020/05/28 Python
解决pytorch下出现multi-target not supported at的一种可能原因
2021/02/06 Python
html5的画布canvas——画出简单的矩形、三角形实例代码
2013/06/09 HTML / CSS
全球地下的服装和态度:Slam Jam
2018/02/04 全球购物
国贸专业个人求职信范文
2014/01/08 职场文书
出生医学证明样本
2014/01/17 职场文书
幼儿园老师寄语
2014/04/03 职场文书
验房委托书
2014/08/30 职场文书
2015年保送生自荐信
2015/03/24 职场文书
培训班通知
2015/04/25 职场文书
鉴史问廉观后感
2015/06/10 职场文书
运动会广播稿100字
2015/08/19 职场文书