element ui实现前台打印功能

作者:自由 2020/12/6 17:31:08
在项目中经常会使用打印功能,element ui前台实现打印功能,就省去了我们后台再去通过模板实现打印,如果是习惯了,前台负责调整格式后台负责给前台传数据就好.

      在项目中经常会使用打印功能,这次我们来看一下element ui实现打印功能,后台采用springboot作为后台接口方法,后台抽数据就不用看了,大家都明白,抽出来需要打印的数据就好,然后传给前台json数据。前台element ui来处理打印工作。下面咱们看一下前台如何做一个打印功能。

1.使用vue-print-nb插件

vue-print-nb是一个vue的前台打印插件,引入的方式请参照下方:

①安装vue-print-nb插件

npm install vue-print-nb --save

②引入打印的插件

import Print from 'vue-print-nb'

③在页面中注册打印的插件

Vue.use(Print) // 注册vue插件

2.在页面控件中使用

定义一个打印区域,用来画打印的内容和样式

<template>
  <div id="printTest" style="background:red;">
    <h1>测试打印操作</h1>
  </div>
</template>  

3.定义按钮执行打印

定义一个按钮,用来点击执行printTest模版的打印操作

<el-button 
  type="text" 
  icon="el-icon-printer" 
  class="red" 
  v-print="'#printTest'">
</el-button>

    目前这个打印只是简单的打印功能,只是打印了一行标题,可以插入表格或者根据需求的不同画不一样的前台样式打印出来,后台只需要传数据前台接收数据就行,不需要后台过多的操作,大家可以根据自己的业务需求来填充自己要打印的页面格式

 

 

前台实现打印

element ui实现打印

vue实现打印

打印

评论: