vue+axios请求实现下载功能

实验环境

版本为：
“vue”: “^2.6.14”,
“axios”: “^1.2.1”,
“element-ui”: “^2.4.5”,

具体代码

1. UI界面，具体代码参考GitHub,若对您有帮助，还希望您点一个Star。

   <el-button
       size="mini"
       type="success" plain
       @click="downloadFile(scope.$index, scope.row)">下载
   </el-button>

2. js逻辑

   downloadFile(index,row){
     axios.get('/api/download',{
       params: {    // 请求参数拼接在url上
         fileName: row.fileName
       },responseType: "blob"
     }).then(res=>{
       const type = String(row.fileName.split('.').slice(-1));
       let blob = new Blob([res.data], {
         type: type //这里需要根据不同的文件格式写不同的参数,例如：.mp3、.mp4
       });
       let eLink = document.createElement("a");
       eLink.download = row.fileName; //这里需要自己给下载的文件命名
       eLink.style.display = "none";
       eLink.href = URL.createObjectURL(blob);
       document.body.appendChild(eLink);
       eLink.click();
       URL.revokeObjectURL(eLink.href);
       document.body.removeChild(eLink);
     })
   },

3. SpringBoot 后端接口,整合minio，具体代码参考GitHub,若对您有帮助，还希望您点一个Star。

      /**
    * 下载文件 serverImpl层
    *
    * @param fileName 文件名
    */
   @Override
   public R download( HttpServletResponse response, String fileName) {
       // get object given the bucket and object name
       try (InputStream stream = minioClient.getObject(
               GetObjectArgs.builder()
                       .bucket(bucket)
                       .object(fileName)
                       .build())) {
           // Read data from stream
           //浏览器指定下载类型
           response.setHeader("content-disposition","attachment;filename="+ URLEncoder.encode(fileName,"UTF-8"));
           //下载文件
           IOUtils.copy(stream, response.getOutputStream());
       }catch (MinioException | InvalidKeyException | IOException | NoSuchAlgorithmException e){
           log.error(e.getMessage());
           return R.error().message("下载失败");
       }
       return R.success().message("下载成功");
   }

   /**
    * 下载文件 server
    * @param fileName 文件名
    */
   R download(HttpServletResponse response, String fileName);

   /**
    * 下载文件 controller层
    * @param fileName 文件名
    */
   @GetMapping("/download")
   public R download(HttpServletResponse response,String fileName){
       return R.success().map("data",fileService.download(response,fileName));
   }