Vue框架导出功能的实现

前端代码

<el-button type="text" class="el-icon-upload2" style="font-size: 15px" @click="dialogDownload = true">导出</el-button>

当点击按钮时，dialogDownload弹窗将会显示并弹出

//导出的文件名
filename: "在线用户文件",
//下载文件弹窗显示与否
dialogDownload: false,

设置前端属性

// Excel
exportExcel() {
    this.$axios.post("http://47.100.192.185:10020/boss-bes-user-permission-center/api/UserOnlineInfo/setFilename", this.filename)
        .then(resp => {
            if (resp && resp.status === 200) {
                window.location.href = 'http://47.100.192.185:10020/boss-bes-user-permission-center/api/UserOnlineInfo/excel';
                this.dialogDownload = false;
            }
        });
},

前端的导出函数，与后端接口进行交互,导出的文件默认存放在浏览器默认下载文件夹下。

后端代码

控制层

  /**
     * 获取文件名字
     * @param filename
     * @throws UnsupportedEncodingException
     */
//    @GlobalExceptionLog
    @PostMapping("/setFilename")
    public void setFilename(@RequestBody String filename) throws UnsupportedEncodingException {
        this.filename = URLDecoder.decode(filename.substring(0,filename.length()-1), "UTF-8");
    }

    /**
     * 导出excel文件
     * @param response
     */
//    @GlobalExceptionLog
    @GetMapping("/excel")
    public void export(HttpServletResponse response){
        try {
            List<UserOnlineInfoExcelDTO> dto = userOnlineInfoService.queryAll();
            FileUtils.exportExcel(dto,"在线用户文件","导出", UserOnlineInfo.class,
                    filename+".xls",response);
        }catch (ServiceException serviceException){
            throw new BusinessException(serviceException);
        }
    }

业务层

/**
 *
 * @return
 */
public List<UserOnlineInfoExcelDTO> queryAll() {
    List<UserOnlineInfo> userOnlineInfos = new ArrayList<UserOnlineInfo>();
    userOnlineInfos = userOnlineInfoDao.selectAll();
    ArrayList<UserOnlineInfoExcelDTO> dtos = new ArrayList<UserOnlineInfoExcelDTO>();
    for (UserOnlineInfo userOnlineInfo:userOnlineInfos){
        UserOnlineInfoExcelDTO dto = new UserOnlineInfoExcelDTO();
        BeanUtils.copyProperties(userOnlineInfo,dto);
        dtos.add(dto);
    }
    return dtos;
}

DAO

引用通用mapper

最终效果图