axios+springboot下载文件

最新推荐文章于 2024-08-13 14:14:00 发布

浩然*

最新推荐文章于 2024-08-13 14:14:00 发布

阅读量705

点赞数 1

文章标签： spring boot vue.js javascript

本文链接：https://blog.csdn.net/a772316182/article/details/121338953

版权

本文档展示了如何使用axios从后端下载文件。前端部分通过创建隐藏的a标签，设置下载属性，并利用blob对象创建URL来触发文件下载。后端使用Spring MVC返回ResponseEntity，设置相应头信息，确保文件正确下载。

摘要由CSDN通过智能技术生成

downloadFile() {
      let path = this.chosenItem.path
      let filename = this.chosenItem.name
      axios.get('/download', {params: {path}, responseType: 'blob'}).then(res => {
        let eleLink = document.createElement('a');
        eleLink.download = filename;
        eleLink.style.display = 'none';
        // 字符内容转变成blob地址
        let blob = new Blob([res.data]);
        eleLink.href = URL.createObjectURL(blob);
        // 触发点击
        document.body.appendChild(eleLink);
        eleLink.click();
        // 然后移除
        document.body.removeChild(eleLink);
      })
    }

@GetMapping("/download")
    public ResponseEntity<FileSystemResource> download(@RequestParam String path) {
        System.out.println(path);
        File file = fileBasicService.download(path);
        String fileName = file.getName();
        HttpHeaders headers = new HttpHeaders();
        headers.add("Content-Disposition", String.format("attachment;filename=\"%s", fileName));
        headers.add("Cache-Control", "no-cache, no-store, must-revalidate");
        headers.add("Pragma", "no-cache");
        headers.add("Expires", "0");
        headers.add("Last-Modified", new java.util.Date().toString());
        headers.add("ETag", String.valueOf(System.currentTimeMillis()));

        return ResponseEntity
                .ok()
                .headers(headers)
                .contentLength(file.length())
                .contentType(MediaType.parseMediaType("application/octet-stream"))
                .body(new FileSystemResource(file));
    }