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

    

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>
</div>
<button v-print="'#printTest'">打印</button>

4.如需通过链接地址打印:window.location.href = airway_bill; airway_bill为链接地址。

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

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

插件地址:https://github.com/xyl66/vuePlugs_printjs

1.在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) // 使用

2.注意事项 需使用ref获取dom节点,若直接通过id或class获取则webpack打包部署后打印内容为空

3.指定不打印区域

方法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'}) // 使用

所有原创文章采用 知识共享署名-非商业性使用 4.0 国际许可协议 进行许可。
您可以自由的转载和修改,但请务必注明文章来源并且不可用于商业目的。
本站部分内容收集于互联网,如果有侵权内容、不妥之处,请联系我们删除。敬请谅解!

  Previous post 懒人npm运行和打包命令
Next post   JS异步执行

仅有一条评论

  1. 已经添加了你的博客

添加新评论

  关于博主

QQ:1960727927
E-Mail:ceet@vip.qq.com
个人主页:https://tencent.信息

  近期评论

  •  osc_omoo: 前端加密后端解密吧?你不会用的是nodejs吧?改成java的后端解密麻烦吗?
  •  环洋诚信SSL证书客服: 按照博主的思路和代码,我已经搭建成功了。但是有一个小小的问题想请教下,重新执行安装代码后,之前...
  •  澄弘: 已经添加了你的博客

一段未来,一段现在,一段过去。

把我对你的好全部记着,然后原封不动的还给我。

时光总是带走了最美好的东西。

有心才会累,没心无所谓。

也许在我心里有太多你的痕迹,以至于后来我爱的人都像你。

有的时候我真的好想抛下一切,消失一整天。