Vue前端项目-用户管理-导出用户列表

目录

 1、Vue端(查询数据)

1.1、导出按钮添加点击事件

1.2、定义导出方法

1.3、确认框

1.4、引入 导出用户方法（即 exportUser方法）

1.5、定义导出用户方法

2、Vue端（下载数据）

2.1、定义通用的下载方法

2.2、全局挂载下载方法

2、SpringBoot后台

2.1、导入依赖

2.2、Controller层处理导出方法

2.3、导出工具类

2.4、放行下载请求

2.5、通用的Controller处理上传下载请求

2.6、在需要导出的实体类中添加 @Excel 注解

---

实现效果：

 

 1、Vue端(查询数据)

1.1、导出按钮添加点击事件

            <el-button
              type="warning"
              icon="el-icon-download"
              size="mini"
              @click="handleExport"
            >导出</el-button>

1.2、定义导出方法

    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams
      this.$confirm('是否确认导出所有用户数据项?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(function() {
          return exportUser(queryParams)
        })
        .then(response => {
          this.download(response.msg)
        })
        .catch(function() {})
    }

补充：

exportUser(queryParams)：导出的数据可以通过 搜索框中的条件 来查询数据

1.3、确认框

在 src / plugins / element.js 中添加确认框

import { MessageBox } from 'element-ui'

Vue.prototype.$msgbox = MessageBox
Vue.prototype.$confirm = MessageBox.confirm

1.4、引入 导出用户方法（即 exportUser方法）

在 src / views / system / user / index.vue 中

import { exportUser } from '@/api/system/user'

1.5、定义导出用户方法

在 src / api / system / user.js 文件中

import request from '@/utils/request'

// 导出用户
export function exportUser(query) {
  return request({
    url: '/system/user/export',
    method: 'get',
    params: query
  })
}

2、Vue端（下载数据）

2.1、定义通用的下载方法

在 src / utils / ruoyi.js 中

const baseURL = 'http://127.0.0.1:8888/ruoyi'

// 通用下载方法
export function download(fileName) {
  window.location.href = baseURL + '/common/download?fileName=' + encodeURI(fileName) + '&delete=' + true
}

 

2.2、全局挂载下载方法

在 src / main.js 中

import { download } from '@/utils/ruoyi'

Vue.prototype.download = download

2、SpringBoot后台

2.1、导入依赖

        <poi.version>3.17</poi.version>
        <commons.io.version>2.5</commons.io.version>
        <commons.fileupload.version>1.3.3</commons.fileupload.version>

        <!-- excel工具 -->
        <dependency>
            <groupId>org.apache.poi</groupId>
            <artifactId>poi-ooxml</artifactId>
            <version>${poi.version}</version>
        </dependency>
        <!--io常用工具类 -->
        <dependency>
            <groupId>commons-io</groupId>
            <artifactId>commons-io</artifactId>
            <version>${commons.io.version}</version>
        </dependency>
        <!--文件上传工具类 -->
        <dependency>
            <groupId>commons-fileupload</groupId>
            <artifactId>commons-fileupload</artifactId>
            <version>${commons.fileupload.version}</version>
        </dependency>

 

2.2、Controller层处理导出方法

package com.ruoyi.project.system.controller;

/**
 * 用户信息
 *
 * @author ruoyi
 */
@RestController
@RequestMapping("/system/user")
@CrossOrigin
public class SysUserController extends BaseController {
    @Resource
    private ISysUserService userService;
  
    @GetMapping("/export")
    public AjaxResult export(SysUser user) {
        List<SysUser> list = userService.selectUserList(user);
        ExcelUtil<SysUser> util = new ExcelUtil<SysUser>(SysUser.class);
        return util.exportExcel(list, "用户数据");
    }

}

补充：

userService.selectUserList ：条件查询用户方法不是本章重点，所以不深入讲解。

2.3、导出工具类

package com.ruoyi.common.utils.poi;
/**
 * Excel相关处理
 *
 * @author ruoyi
 */
public class ExcelUtil<T> {
    private static final Logger log = LoggerFactory.getLogger(ExcelUtil.class);

    /**
     * Excel sheet最大行数，默认65536
     */
    public static final int sheetSize = 65536;

    /**
     * 工作表名称
     */
    private String sheetName;

    /**
     * 导出类型（EXPORT:导出数据；IMPORT：导入模板）
     */
    private Type type;

    /**
     * 工作薄对象
     */
    private Workbook wb;

    /**
     * 工作表对象
     */
    private Sheet sheet;

    /**
     * 样式列表
     */
    private Map<String, CellStyle> styles;

    /**
     * 导入导出数据列表
     */
    private List<T> list;

    /**
     * 注解列表
     */
    private List<Object[]> fields;

    /**
     * 实体对象
     */
    public Class<T> clazz;

    public ExcelUtil(Class<T> clazz) {
        this.clazz = clazz;
    }

    public void init(List<T> list, String sheetName, Type type) {
        if (list == null) {
            list = new ArrayList<T>();
        }
        this.list = list;
        this.sheetName = sheetName;
        this.type = type;
        createExcelField();
        createWorkbook();
    }

    /**
     * 对excel表单默认第一个索引名转换成list
     *
     * @param is 输入流
     * @return 转换后集合
     */
    public List<T> importExcel(InputStream is) throws Exception {
        return imp