VUE下载文件，原以为很简单

最新推荐文章于 2025-04-28 17:15:11 发布

原创

最新推荐文章于 2025-04-28 17:15:11 发布 · 1.6k 阅读

1 ·

CC 4.0 BY-SA版权

在Vue项目中，文件下载原本以为只是设置一个链接指向文件位置。然而实践过程中遇到404问题，原因是直接链接未暴露的后端API无法下载。后端添加下载接口，设置响应头信息并以流方式输出文件。但在部署时，由于前端链接固定，与后端部署目录不一致导致下载失败。解决方案是前端使用axios请求，并将返回内容转换为blob文件，确保前后端部署一致性。

文件下载不就是个链接

测试平台有个对比功能要上传个文件，一向理解的文件下载，就是在前端设置个超链接，能链接到文件地址就可以下载了。于是就照着这个思路开始写，先是前端来个超链接，

	<a :href='url' download='file.xxx'>

简单。下面就是文件放置地址了，想过放前端，可是太不规范，我们还是要按规矩来，放到后端webapp目录下。放置好后，怎么拼装链接都拿不到文件，都是404，很小白的问题，后端没有暴露API，不可能这样直接能获取文件（其实配置tomcat成文件服务器也可以，本篇不讲）。

后端设置文件下载接口

那就增加个接口吧

    @RequestMapping(value = "compare")
    public void addDBConfig(HttpServletResponse response, HttpServletRequest request) {
   
   
    	// 从项目根目录开始获取文件，path必须是文件名，而不是上级目录
        String filePath = System.getProperty("webapp.root") + "file/template.xlsx";
        logger.info("获取文件路径：" + filePath);
        String fileName = "template.xlsx";
        String userAgent = request.getHeader("USER-AGENT");
        boolean result = myDownLoad(filePath, fileName, userAgent, response);
        if (!result)
            logger.error("对比文件下载有误");
    }

通用下载方法，后续有其他下载时可用。
重点关注是返回要设置头信息，文件要输出成流，以及编码统一防止乱码。

//下载方法
    public boolean myDownLoad(String filePath, String fileName, String userAgent, HttpServletResponse response) {
   
   
        File f = new File(filePath);
        if (!f.exists()) {