element ui实现前台打印功能

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 在页面控件中使用

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

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

03 定义按钮执行打印

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

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

总结

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

扫码关注我们

element ui实现前台打印功能

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

原文链接:https://mp.weixin.qq.com/s/vLScw4imGNPeb8_ZN5B86A

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

发表评论

登录后才能评论