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

原创已于 2023-04-18 11:15:40 修改 · 959 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

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

vue3 同时被 2 个专栏收录

3 篇文章

订阅专栏

插件

2 篇文章

订阅专栏

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

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>