springboot+vue+elementUI进行文件的下载

---

本人技术有限写的不好的地方敬请原谅，如有什么问题或者更好的建议大家可以留言或者私信

前言

学成在线在线项目，教程中没有提到模板管理本人实现之后。忽略了一个重要的问题就是模板文件的下载，需要更改模板文件的内容化的时候只需要下载最新的进行更改然后重新上传即可

模板管理实现的详细代码与步骤请参考这个分类下的文章：https://blog.csdn.net/weixin_45305953/category_9836467.html

---

一、解决思路

前端携带模板ID进行请求服务端代码，服务端获取到ID查询到数据信息之后，转换成byte[]然后进行返回即可。这里没有实现选择目录保存，百度了很多方式试了也没有用如果各位有比较好的想法可以私聊或直接评论进行更改

二、服务端：xc-service-manage-cms工程

1.api与controller

//controller下载模板
@Override
@GetMapping("/downloadTemplateFile/{templateFileId}")
public byte[] downloadTemplateFile(@PathVariable("templateFileId") String templateFileId, HttpServletRequest request, HttpServletResponse response) {
    return  this.templateService.downloadTemplateFile(templateFileId,request,response);
}

 @ApiOperation("下载模板文件")
 public byte[] downloadTemplateFile(String templateFileId, HttpServletRequest request, HttpServletResponse response);

2.service

//service下载模板文件
public byte[] downloadTemplateFile(String templateId,HttpServletRequest request, HttpServletResponse response) {
    //根据templateId查询模板对象
    Optional<CmsTemplate> optional = this.cmsTemplateRepository.findById(templateId);
    if (!optional.isPresent()){
        ExceptionCast.cast(CommonCode.INVALID_PARAM);
        log.error("参数异常，查询不到对应的模板信息；templateId："+templateId);
        return null;
    }
    //获取模板对象
    CmsTemplate cmsTemplate = optional.get();
    //获取模板文件Id
    String templateFileId = cmsTemplate.getTemplateFileId();
    //使用GridFSFile获取模板对象对应的模板文件（根据模板文件Id）
    GridFSFile gridFSFile = gridFsTemplate.findOne(Query.query(Criteria.where("_id").is(templateFileId)));
    //获取文件的名称
    String filename = gridFSFile.getFilename();
    //打开下载流对象(指定文件名称)
    GridFSDownloadStream gridFSDownloadStream = gridFSBucket.openDownloadStream(filename);
    //创建gridFsResource，用于获取流对象（参数1：获取的文件名称，参数2下载流对象）
    GridFsResource gridFsResource = new GridFsResource(gridFSFile,gridFSDownloadStream);
    //设置reponse响应头，真实文件名重命名，就是在这里设置，设置编码
    response.setHeader("Content-Disposition", "attachment; filename="+ filename);
    response.setHeader("Content-Length", String.valueOf(gridFSFile.getLength()));
    try {
        byte[] bytes = IOUtils.toByteArray(gridFsResource.getInputStream());
        return bytes;
    } catch (IOException e) {
        e.printStackTrace();
        log.error("下载模板文件失败，模板Id："+templateId);
        return null;
    }
}

二.前端

1.template_list.vue页面

增加一个下载模板文件的按钮

<!--插槽可以列出多个操作按钮-->
<template slot-scope="page">
  <el-button size="small" type="text" @click="edit(page.row.templateId)">编辑</el-button>
  <el-button size="small" type="text" @click="del(page.row.templateId)">删除</el-button>
  <el-button size="small" type="text" @click="download(page.row.templateId)">下载模板</el-button>
</template>

2.发送下载请求的方法

//template_list.vue中需要导入的文件
  let sysConfig = require('@/../config/sysConfig')
  let apiUrl = sysConfig.xcApiUrlPre;
  import http from './../../../base/api/public';

//下载模板文件
download:function (templateId) {
  this.$confirm('确认下载此模板，重新编写上传吗？', '提示', {}).then(()=>{
 	window.location.href=apiUrl+"/cms/template/downloadTemplateFile/"+templateId;
  })
},

测试

点击下载模板会发送请求把对应的模板文件下载到浏览器默认下载目录，修改完成之后重新上传修改后的文件即可
如果可以实现选择目录下载请私信或私聊我。

本人技术有限如有任何问题，或者更好的解决方法直接评论私聊我即可