Spring Boot + Vue + Element-UI 实现文件下载

最新推荐文章于 2024-05-16 15:03:29 发布

Serenity_Qin

最新推荐文章于 2024-05-16 15:03:29 发布

阅读量472

点赞数 10

本文链接：https://blog.csdn.net/Serenity_Qin/article/details/135712599

版权

前端专栏收录该内容

21 篇文章 0 订阅

订阅专栏

本文介绍了如何在SpringBoot项目中创建一个后端接口，用于处理文件下载请求，并配合前端Vue.js中的El-Table实现文件下载功能。通过@Autowired注解注入服务，处理文件信息并设置合适的HTTP头以实现文件下载。

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

实现效果：点击链接，下载对应文件

后端接口：

import com.example.admin.entity.FileEntity;
import com.example.admin.service.FileService;
import com.example.admin.utils.Result;
import jakarta.servlet.ServletOutputStream;
import jakarta.servlet.http.HttpServletResponse;
import org.apache.tomcat.util.http.fileupload.IOUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.io.File;
import java.io.FileInputStream;
import java.io.IOException;
import java.net.URLEncoder;

@RestController
@RequestMapping("/file")
public class FileController {

    @Autowired
    private FileService fileService;

    // 根据文件id查询文件信息
    @GetMapping("/getFile")
    public Result<FileEntity> getFile(String fid) {
        return fileService.getFileById(fid);
    }

    // 文件下载
    @GetMapping("/download")
    public void fileDownload(String fid, HttpServletResponse response) throws IOException {
        FileEntity fileEntity = fileService.getFileById(fid).getData();
        String fname = fileEntity.getFname();
        String path = fileEntity.getPath();
        File file = new File(path);
        FileInputStream is = new FileInputStream(file);
        response.setContentType("application/x-download;charset=utf-8");
        response.setHeader("Content-Disposition", "attachment;filename=" + URLEncoder.encode(fname, "UTF-8"));
        ServletOutputStream os = response.getOutputStream();
        IOUtils.copy(is, os);
        IOUtils.closeQuietly(is);
        IOUtils.closeQuietly(os);
    }

}

前端代码：

<el-table-column label="下载文件" prop="licence1">
  <template slot-scope="scope">
    <!-- 使用 scoped slot 自定义单元格内容 -->
    <el-link @click="download(scope.row.licence1)">
      {{ scope.row.licence1 }}
    </el-link>
  </template>
</el-table-column>

/* 下载文件 */
async download(fid) {
  try {
    const response = await this.$axios.get("/api/file/download", {
      params: {
        fid: fid,
      },
      responseType: "arraybuffer",
    });
    const url = window.URL.createObjectURL(new Blob([response.data]));
    const link = document.createElement("a");
    link.href = url;
    // 获取文件信息
    const fileInfoResponse = await this.$axios.get("/api/file/getFile", {
      params: {
        fid: fid,
      },
    });
    const fname = fileInfoResponse.data.data.fname;
    link.setAttribute("download", `${fname}`);
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    window.URL.revokeObjectURL(url);
  } catch (error) {
    console.error("Download error:", error);
  }
},