使用vue 搭配 vue-easy-print 实现打印功能

你好小同志

已于 2023-04-18 11:15:40 修改

阅读量927

点赞数

CC 4.0 BY-SA版权

分类专栏：插件 vue3 文章标签： vue.js javascript 前端

于 2022-11-25 13:40:48 首次发布

本文链接：https://blog.youkuaiyun.com/wangkangyang/article/details/128036514

vue3 同时被 2 个专栏收录

3 篇文章

订阅专栏

插件

2 篇文章

订阅专栏

本文介绍了如何在Vue项目中使用vue-easy-print组件进行打印，并详细阐述了安装步骤、组件引用及实现分页的方法，通过设置`page-break-after: always`实现内容分页打印。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1 安装

npm install vue-easy-print --save

2. 在需要使用的页面引用

 <vueEasyPrint ref="easyPrint"> 写上你要打印的内容</vueEasyPrint>
import vueEasyPrint from "vue-easy-print";
  components: {
    vueEasyPrint,
  },

 methods: {
    print(type) {
      this.$refs.easyPrint.print();
    },
  },

3 以上两步就可以直接打印了但是项目需要进行分页

 <vueEasyPrint ref="easyPrint"> 
<div style="page-break-after:always">我是第一个分页</div>
<div style="page-break-after:always">我是第二个分页</div>
</vueEasyPrint>