element ui实现前台打印功能

简介

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

01 使用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插件

02 在页面控件中使用

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

03 定义按钮执行打印

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

type="text"

icon="el-icon-printer"

class="red"

v-print="'#printTest'">

总结

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

扫码关注我们

原文出处：微信公众号【 自由的程序员 十分钟空间】

本文观点不代表Dotnet9立场，转载请联系原作者。