springcloud脚手架JHipster平台，前端 vue 使用 blob技术 实现文件下载

=>     此方法可以解决一些下载文件没有后缀即格式 问题

后端工具类：

    /**
     * 文件下载工具
     * @param resp 响应对象
     * @param name 文件名
     * @param location 文件根地址
     * @param downloadPath 文件下载地址
     * @throws IOException
     */
    public static void download(HttpServletResponse resp, String name, String location, String downloadPath) throws IOException {
        location = location.replace("\\","/");
        String newPath = downloadPath.replace(Constant.NGINX_ADDRESS, location);
        newPath = URLDecoder.decode(newPath, "UTF-8");

        File file = new File(newPath);
        if (file.exists()){
            System.out.println("文件是真实存在的.....");
        }
        String before = name.substring(0,name.lastIndexOf("."));
        String last = name.substring(name.lastIndexOf("."));
        name = new String(before.getBytes("UTF-8"), "ISO-8859-1") + last;

        resp.reset();
        resp.setContentType("application/octet-stream");
        resp.setCharacterEncoding("utf-8");
        resp.setHeader("Content-Disposition", "attachment;filename=" + name);


        byte[] buff = new byte[1024];
        BufferedInputStream bis = null;
        OutputStream os = null;
        try {
            os = resp.getOutputStream();
            bis = new BufferedInputStream(new FileInputStream(file));
            int i = 0;
            while ((i = bis.read(buff)) != -1) {
                os.write(buff, 0, i);
                os.flush();
            }
        } catch (IOException e) {
            e.printStackTrace();
        } finally {
            try {
                if (bis!=null){
                    bis.close();
                }
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    }

前端axios api方法（此处使用了框架统一封装的请求对象）：

export function downloadFile (params) {
  return request({
    url: `${baseMMSUri}/tec/download`,
    responseType: 'blob',
    method: 'post',
    params: params
  })
}

此处是element-ui组件的图片下载：

                  <!-- 图片上传Start-->
                  <el-upload action=""
                             ref="uploadImage"
                             :multiple="true"
                             :http-request="uploadImg"
                             list-type="picture-card"
                             accept="image/png,image/jpg,image/jpeg"
                             :on-preview="handlePictureCardPreview"
                             :file-list="reviewList"
                             :auto-upload="false"
                             :on-remove="onRemove"
                             :before-remove="beforeRemove">
                    <i class="el-icon-plus"></i>
                    <div slot="file"
                         slot-scope="{file}">
                      <el-image class="el-upload-list__item-thumbnail"
                                :src="file.url"
                                :alt="file.name">
                      </el-image>
                      <span class="el-upload-list__item-actions">
                        <span class="el-upload-list__item-preview"
                              @click="handlePictureCardPreview(file)">
                          <i class="el-icon-zoom-in"></i>
                        </span>
                        <span v-if="!imgdisabled"
                              class="el-upload-list__item-delete"
                              @click="handleDownload(file)">
                          <i class="el-icon-download"
                             v-show="file.status=='success'? true:false"></i>
                        </span>
                        <span v-if="!imgredisabled"
                              class="el-upload-list__item-delete"
                              @click="beforeRemove(file)">
                          <i class="el-icon-delete"></i>
                        </span>
                      </span>
                    </div>
                  </el-upload>
                  </el-dialog>
                  <!-- 图片上传End-->

相关下载方法：

handleDownload (file) {
      var params = {
        'name': file.name,
        'url': file.url
      }
      api.downloadFile(params)
        .then(res => {
          let blob = new Blob([res], {
            type: 'application/octet-stream;charset=utf-8'
          })
          // let objectUrl = URL.createObjectURL(blob);
          // window.location.href = objectUrl;
          const elink = document.createElement('a')
          elink.download = file.name
          elink.style.display = 'none'
          elink.href = URL.createObjectURL(blob)
          document.body.appendChild(elink)
          elink.click()
          URL.revokeObjectURL(elink.href) // 释放URL 对象
          document.body.removeChild(elink)
          this.$message.success('已成功下载')
        })
    },

PS: 注意！此处的res相应对象是已经经过拦截处理的，是直接数据，没有经过处理的，需要加res.data.data或者res.data具体看你数据在哪一层！