脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue打印

vue实现打印功能的两种方法

 更新时间：2018年09月07日 14:06:36   作者：peiyongwei  
这篇文章主要介绍了vue实现打印功能的两种方法,文中通过两种方法给大家介绍了指定不打印区域的解决方法，需要的朋友可以参考下

第一种方法：通过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>

如果内容打印不全，在打印操作时点击更多设置，然后设置缩放

第二种方法：手动下载插件到本地

插件地址：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.js实现可配置的登录表单代码详解

    Vue.js实现可配置的登录表单代码详解

    这篇文章主要介绍了Vue.js实现可配置的登录表单实例代码详解，文中给大家补充介绍了vue.js 全选与取消全选的实例代码,需要的朋友可以参考下
    2018-03-03
  • vue车牌搜索组件使用方法详解

    vue车牌搜索组件使用方法详解

    这篇文章主要为大家详细介绍了vue车牌搜索组件的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-09-09
  • Vue对话框组件使用方法详解

    Vue对话框组件使用方法详解

    这篇文章主要为大家详细介绍了Vue对话框组件的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-03-03
  • Vue中@click.stop和@click.prevent实例详解

    Vue中@click.stop和@click.prevent实例详解

    当我们使用Vue.js开发前端应用时,经常会在模版中使用@click指令来响应用户的点击事件,这篇文章主要给大家介绍了关于Vue中@click.stop和@click.prevent的相关资料,需要的朋友可以参考下
    2024-04-04
  • vue项目中各文件的使用说明

    vue项目中各文件的使用说明

    这篇文章主要介绍了vue项目中各文件的使用说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-02-02
  • 三分钟让你快速学会axios在vue项目中的基本用法(推荐!)

    三分钟让你快速学会axios在vue项目中的基本用法(推荐!)

    Axios是一个基于Promise用于浏览器和nodejs的HTTP客户端,下面这篇文章主要给大家介绍了如何通过三分钟让你快速学会axios在vue项目中的基本用法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-04-04
  • vue+element树组件 实现树懒加载的过程详解

    vue+element树组件 实现树懒加载的过程详解

    这篇文章主要介绍了vue+element树组件 实现树懒加载的过程，本文通过图文实例代码相结合给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-10-10
  • vue实现样式之间的切换及vue动态样式的实现方法

    vue实现样式之间的切换及vue动态样式的实现方法

    这篇文章主要介绍了vue中如何实现样式之间的切换及vue动态样式的实现方法，本文给大家介绍的非常详细，具有参考借鉴价值,需要的朋友可以参考下
    2017-12-12
  • vue实现登录界面

    vue实现登录界面

    这篇文章主要为大家详细介绍了vue实现登录界面，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-06-06
  • Vue源码cached解析

    Vue源码cached解析

    最近在写闭包的应用的时候，出现了一个cached函数，来源于Vue源码，利用了闭包变量不会被回收的特点，可以缓存变量，cached本质上是一个高阶函数，它接受一个函数的参数，同时返回一个函数
    2022-08-08

最新评论