vue前端下载文件,java后端

vue前端

html 复制代码
<template>
  <div>
    <button @click="downloadFile">Download File</button>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  methods: {
    async downloadFile() {
      try {
        const response = await axios.get('http://your-backend-url/download', {
          responseType: 'blob' // 告诉axios响应的数据类型为Blob
        });
        const blob = new Blob([response.data], { type: 'application/octet-stream' });
        const url = window.URL.createObjectURL(blob);
        const link = document.createElement('a');
        link.href = url;
        link.setAttribute('download', 'filename.ext'); // 设置下载文件的文件名
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      } catch (error) {
        console.error('Error downloading file:', error);
      }
    }
  }
}
</script>

java后端代码

java 复制代码
import org.springframework.core.io.Resource;
import org.springframework.core.io.UrlResource;
import org.springframework.http.HttpHeaders;
import org.springframework.http.MediaType;
import org.springframework.http.ResponseEntity;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;

import java.io.IOException;
import java.nio.file.Path;
import java.nio.file.Paths;

@Controller
@RequestMapping("/download")
public class FileDownloadController {

    @GetMapping
    public ResponseEntity<Resource> downloadFile() {
        // 指定要下载的文件路径
        String filePath = "/path/to/your/file.ext";
        Path path = Paths.get(filePath);
        Resource resource;
        String contentType;
        try {
            // 从文件路径创建一个资源对象
            resource = new UrlResource(path.toUri());
            // 根据文件扩展名动态设置 Content-Type
           contentType = determineContentType(resource.getFilename());
        } catch (IOException e) {
            e.printStackTrace();
            return ResponseEntity.notFound().build();
        }

        // 检查资源是否存在并且可读
        if (!resource.exists() || !resource.isReadable()) {
            return ResponseEntity.notFound().build();
        }

        // 尝试下载文件
        try {
           
            return ResponseEntity.ok()
                    .contentType(MediaType.parseMediaType(contentType))// 设置响应内容类型为流数据
                    .header(HttpHeaders.CONTENT_DISPOSITION, "attachment; filename=\"" + resource.getFilename() + "\"") // 设置下载文件的文件名
                    .body(resource); // 返回资源对象
        } catch (Exception e) {
            e.printStackTrace();
            // 如果下载失败,
            //return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body("下载文件失败,请稍后重试。");
        }
    }
	// 根据文件扩展名返回对应的 Content-Type
	private String determineContentType(String filename) {
	    String extension = filename.substring(filename.lastIndexOf(".") + 1).toLowerCase();
	    switch (extension) {
	        case "pdf":
	            return "application/pdf";
	        case "txt":
	            return "text/plain";
	        case "doc":
	        case "docx":
	            return "application/msword";
	        case "xls":
	        case "xlsx":
	            return "application/vnd.ms-excel";
	        // 其他文件类型...
	        default:
	            return "application/octet-stream"; // 默认为二进制数据流
	    }
	}
}
相关推荐
小心我捶你啊35 分钟前
数据采集和Web解锁不是一回事,从用途到规则区分
前端·爬虫·网络协议
hunterandroid1 小时前
[鸿蒙从零到一] ArkUI 基础组件实战:Text、Image、Button 与 TextInput
前端
tellmewhoisi1 小时前
多版本共用redis的token有效期校验(过期重新登录)
java·redis·缓存
疯狂打码的少年1 小时前
【软件工程】结构化设计:模块独立性与耦合内聚
java·开发语言·笔记·软件工程
fsssb1 小时前
Chromium 源码学习笔记(五):一次点击,在进入 JS 之前先经历了什么?
前端
hunterandroid1 小时前
WorkManager 可靠性实战:唯一任务、重试与幂等设计
android·前端
乐观的Terry1 小时前
3、数据库设计与领域实体
java·数据库·spring boot·spring cloud·ai编程
鹿目1 小时前
使用 Vant CLI 搭建 UI 组件库:从 H5 到小程序跨平台
前端·javascript
默_笙1 小时前
😭 我花了两小时找了一个数据结构 bug,才把"迷你 Cursor"跑起来,绝望(bushi)
前端·javascript
竹林8181 小时前
wagmi v2 监听合约事件踩坑记:从 `useContractEvent` 到 `watchContractEvent`,我重构了三版才搞定实时数据流
前端·javascript