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创建对象的方式总结
Jan 10 Javascript
nw.js实现类似微信的聊天软件
Mar 16 Javascript
JS获取iframe中longdesc属性的方法
Apr 01 Javascript
JavaScript对象学习小结
Sep 02 Javascript
超实用的JavaScript代码段 附使用方法
May 22 Javascript
基于JavaScript实现拖动滑块效果
Feb 16 Javascript
vue.js利用Object.defineProperty实现双向绑定
Mar 09 Javascript
JavaScript 中 apply 、call 的详解
Mar 21 Javascript
通过学习bootstrop导航条学会修改bootstrop颜色基调
Jun 11 Javascript
JS定义函数的几种常用方法小结
May 23 Javascript
javascript实现支付宝滑块验证码效果
Jul 24 Javascript
SSM VUE Axios详解
Oct 05 Vue.js
使用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一些服务器端特性的配置加强php的安全
2006/10/09 PHP
php获取从百度搜索进入网站的关键词的详细代码
2014/01/08 PHP
php使用APC实现实时上传进度条功能
2015/10/26 PHP
PHP函数积累总结
2019/03/19 PHP
php封装的pdo数据库操作工具类与用法示例
2019/05/08 PHP
PHP的图像处理实例小结【文字水印、图片水印、压缩图像等】
2019/12/20 PHP
javascript Onunload与Onbeforeunload使用小结
2009/12/31 Javascript
js下用eval生成JSON对象
2010/09/17 Javascript
JS实现固定在右下角可展开收缩DIV层的方法
2015/02/13 Javascript
JS中Eval解析JSON字符串的一个小问题
2016/02/21 Javascript
深入理解jQuery中的事件冒泡
2016/05/24 Javascript
浅析jQuery Ajax通用js封装
2016/06/22 Javascript
JavaScript取得gridview中获取checkbox选中的值
2017/07/24 Javascript
JQuery EasyUI 结合ztrIee的后台页面开发实例
2017/09/01 jQuery
JavaScript面向对象精要(上部)
2017/09/12 Javascript
Node.js利用console输出日志文件的方法示例
2018/04/27 Javascript
react-native使用leanclound消息推送的方法
2018/08/06 Javascript
vue2.0的虚拟DOM渲染思路分析
2018/08/09 Javascript
详解微信小程序-canvas绘制文字实现自动换行
2019/04/26 Javascript
详细分析React 表单与事件
2020/07/08 Javascript
解决vant中 tab栏遇到的坑 van-tabs
2020/11/04 Javascript
[02:17]2016完美“圣”典风云人物:Sccc专访
2016/12/03 DOTA
Python实现删除文件但保留指定文件
2015/06/21 Python
postman模拟访问具有Session的post请求方法
2019/07/15 Python
pyenv与virtualenv安装实现python多版本多项目管理
2019/08/17 Python
调用其他python脚本文件里面的类和方法过程解析
2019/11/15 Python
Django之choices选项和富文本编辑器的使用详解
2020/04/01 Python
深入剖析webstorage[html5的本地数据处理]
2016/07/11 HTML / CSS
HTML5拖放功能_动力节点Java学院整理
2017/07/13 HTML / CSS
演讲稿开场白
2014/01/13 职场文书
社区食品安全实施方案
2014/03/28 职场文书
大学生村官座谈会发言材料
2014/05/25 职场文书
客运企业隐患排查工作方案
2014/06/06 职场文书
SQL优化老出错,那是你没弄明白MySQL解释计划用法
2021/11/27 MySQL
Java基础——Map集合
2022/04/01 Java/Android
java实现面板之间切换功能
2022/06/10 Java/Android