前端vue从后端springboot下载指定文件

chilling_jiayu

已于 2022-10-28 10:31:59 修改

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

文章标签：前端 vue.js spring boot

于 2022-10-28 10:23:57 首次发布

本文链接：https://blog.youkuaiyun.com/printf_chilling/article/details/127566545

本文介绍了如何在前端Vue应用中通过调用后端Spring Boot接口来实现指定文件的下载。详细阐述了前端Vue的请求处理和后端Spring Boot的文件服务实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端vue从后端springboot下载指定文件

前端接口：

downloadTemplate(){
  return request({
    url: '/api/v1/weekprofit/downloadtemplate',
    method: 'post',
    responseType: 'blob'
  })
}

vue代码：

downloadTemplate() {
  weeklyProfitAPI.downloadTemplate().then( res => {
      const data = res.data;
      let url = window.URL.createObjectURL(new Blob([data]));
      let link = document.createElement('a');
      link.style.display = 'none';
      link.href = url;
      link.setAttribute('download', '文件名');
      document.body.appendChild(link);
      link.click();
  });
},

后端代码：

    @PostMapping(value = "/downloadtemplate")
    public void downloadFile(HttpServletResponse response,HttpServletRequest request) {
        String path = "路径";
        String fileName = "文件名";
        String filePath = path + "\\" + fileName;
        File file = new File(filePath);

        response.reset();
        response.setContentType("application/octet-stream");
        response.setCharacterEncoding("utf-8");
        response.setHeader(
                "Content-disposition",
                "attachment; filename="+fileName);
        try(
                BufferedInputStream bis = new BufferedInputStream(new FileInputStream(file));
                // 输出流
                BufferedOutputStream bos = new BufferedOutputStream(response.getOutputStream());
        ){
            byte[] buff = new byte[1024];
            int len = 0;
            while ((len = bis.read(buff)) > 0) {
                bos.write(buff, 0, len);
            }
        } catch (FileNotFoundException e) {
            e.printStackTrace();
        } catch (IOException e) {
            e.printStackTrace();
        }
    }