element ui实现前台打印功能

2022-08-17 14:08:09 浏览数 (3)

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

1.使用vue-print-nb插件

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

①安装vue-print-nb插件

代码语言：javascript复制

npm install vue-print-nb --save

②引入打印的插件

代码语言：javascript复制

import Print from 'vue-print-nb'

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

代码语言：javascript复制

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

2.在页面控件中使用

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

代码语言：javascript复制

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

3.定义按钮执行打印

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

代码语言：javascript复制

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

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

1 人点赞