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"; // 默认为二进制数据流
	    }
	}
}
相关推荐
带刺的坐椅6 分钟前
轻量级流程编排框架,Solon Flow v3.5.0 发布
java·solon·workflow·flow·solon-flow
David爱编程27 分钟前
线程调度策略详解:时间片轮转 vs 优先级机制,面试常考!
java·后端
张人玉31 分钟前
XML 序列化与操作详解笔记
xml·前端·笔记
杨荧39 分钟前
基于Python的宠物服务管理系统 Python+Django+Vue.js
大数据·前端·vue.js·爬虫·python·信息可视化
阿冲Runner1 小时前
创建一个生产可用的线程池
java·后端
YeeWang1 小时前
🎉 Eficy 让你的 Cherry Studio 直接生成可预览的 React 页面
前端·javascript
gnip1 小时前
Jenkins部署前端项目实战方案
前端·javascript·架构
写bug写bug1 小时前
你真的会用枚举吗
java·后端·设计模式
Orange3015112 小时前
《深入源码理解webpack构建流程》
前端·javascript·webpack·typescript·node.js·es6
lovepenny2 小时前
Failed to resolve entry for package "js-demo-tools". The package may have ......
前端·npm