当前第2页 返回上一页
1.在src下新建文件夹plugs,将下载好的print.js放入plugs文件夹下,然后操作如下
1 2 3 4 5 6 7 8 9 | import Print from '@/plugs/print'
Vue.use(Print)
<template>
<section ref= "print" >
打印内容
<div class= "no-print" >不要打印我</div>
</section>
</template>
this .$print( this .$refs.print)
|
2.注意事项 需使用ref获取dom节点,若直接通过id或class获取则webpack打包部署后打印内容为空
3.指定不打印区域
方法1. 添加no-print样式类
1 | <div class= "no-print" >不要打印我</div>
|
方法2. 自定义类名
1 2 | <div class= "do-not-print-me-xxx" >不要打印我</div>
this .$print( this .$refs.print,{ 'no-print' : '.do-not-print-me-xxx' })
|
本篇文章到这里就已经全部结束了,更多其他精彩内容可以关注PHP中文网的JavaScript教程视频栏目!
以上就是vue实现打印功能的两种方法(附代码)的详细内容,更多文章请关注木庄网络博客!
返回前面的内容
相关阅读 >>
vue怎么用react组件
vue脚手架如何导入jquery第三方插件
uniapp和vue的区别是什么
vue中muse-ui是什么
vue中的nexttick原理
怎么用vue.js做异步请求
js和vue的关系是什么
深入了解vue中的计算属性
一起看看vue实现打地鼠小游戏
vue.js支持ie9吗
更多相关阅读请进入《vue》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » vue实现打印功能的两种方法(附代码)