SpringBoot+ElementUI实现通用文件下载请求(全流程图文详细教程)

柔情只为你懂 2023-10-05 08:17 33阅读 0赞

## 场景 ##

在某些场景下需要前端浏览器从服务器端下载文件，比如需要下载导入Excel的模板。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70][]

注：

博客：  
[https://blog.csdn.net/badao\_liumang\_qizhi][https_blog.csdn.net_badao_liumang_qizhi]  
关注公众号  
霸道的程序猿  
获取编程相关电子书、教程推送与免费下载。

## 实现 ##

既然是实现通用下载接口，就要实现在后端配置一个下载文件的路径，在前端进行下载请求时传递要下载的文件的名字，然后请求公共接口进行下载。

首先是在前端使用ElementUI的el-link添加一个下载链接

<el-link
                type="info"
                style="font-size:12px"
                @click="downloadTemplate('lxszTemplate.xlsx')"
              >下载模板</el-link>

这里设置了其点击事件是调用downloadTemplate方法并传递一个文件名参数，这个文件名就是要下载的文件名。

然后在对应的点击事件中

downloadTemplate(value) {
          download(value)
            .then((response) => {})
            .catch((error) => {
              alert("错误：" + error);
            });
        },

这里执行了一个download方法并传递文件名参数。

这个download方法是引用的第三方js中作为公共方法的。

引入方式

import { download } from "@/utils/badao";

在utils下的badao.js中

// 通用下载方法
    export function download(fileName) {
     window.location.href = baseURL + "/common/download?fileName=" + encodeURI(fileName) + "&delete=" + false;
    }

将此方法进行暴露，作为公共方法。

在通用下载方法中使页面跳转window.location.href ，对应的url是SpringBoot中后台的接口。

这里的baseURL是在badao.js中声明的常量

const baseURL = process.env.VUE_APP_BASE_API

对此常量的赋值是取得全局变量process的属性，它对应的是在vue.config.js中配置的代理的地址

proxy: {
          [process.env.VUE_APP_BASE_API]: {
            target: `http://localhost:8080`,
            changeOrigin: true,
            pathRewrite: {
              ['^' + process.env.VUE_APP_BASE_API]: ''
            }
          }
        },

这里是我本地的8080端口。

然后在上面的通用的下载方法中在URL中还拼接了两个参数

一个是文件名参数，调用的js的encodeURI方法可以将字符串作为URL进行编码，一个是是否删除的参数，默认是false，作为下载成功后是否将文件给删除，即实现单次下载还是多次下载。

然后在这个url对应SprinBoot后台接口方法中

@GetMapping("common/download")
        public void fileDownload(String fileName, Boolean delete, HttpServletResponse response, HttpServletRequest request) {
            try {
                if (!FileUtils.isValidFilename(fileName)) {
                    throw new Exception(StringUtils.format("文件名称({})非法，不允许下载。 ", fileName));
                }
                String realFileName = System.currentTimeMillis() + fileName.substring(fileName.indexOf("_") + 1);
                String filePath = RuoYiConfig.getDownloadPath() + fileName;
    
                response.setCharacterEncoding("utf-8");
                response.setContentType("multipart/form-data");
                response.setHeader("Content-Disposition",
                        "attachment;fileName=" + FileUtils.setFileDownloadHeader(request, realFileName));
                FileUtils.writeBytes(filePath, response.getOutputStream());
                if (delete) {
                    FileUtils.deleteFile(filePath);
                }
            } catch (Exception e) {
                log.error("下载文件失败", e);
            }
        }

首先调用了文件处理工具类的验证方法，验证文件名称是否合法。

这里是设置了指定文件名称格式。

方法实现

public static boolean isValidFilename(String filename)
        {
            return filename.matches(FILENAME_PATTERN);
        }

其中参数为常量

public static String FILENAME_PATTERN = "[a-zA-Z0-9_\\-\\|\\.\\u4e00-\\u9fa5]+";

下面是对服务器上文件路径的获取

String filePath = RuoYiConfig.getDownloadPath() + fileName;

其中RuoyiConfig是配置类，用来读取项目相关配置，即配置在application.yml中的内容。

import org.springframework.boot.context.properties.ConfigurationProperties;
    import org.springframework.stereotype.Component;
    
    /**
     * 读取项目相关配置
     *
     * @author ruoyi
     */
    @Component
    @ConfigurationProperties(prefix = "ruoyi")
    public class RuoYiConfig
    {
        /** 项目名称 */
        private String name;
    
        /** 版本 */
        private String version;
    
        /** 版权年份 */
        private String copyrightYear;
    
        /** 实例演示开关 */
        private boolean demoEnabled;
    
        /** 上传路径 */
        private static String profile;
    
        /** 获取地址开关 */
        private static boolean addressEnabled;
    
        public String getName()
        {
            return name;
        }
    
        public void setName(String name)
        {
            this.name = name;
        }
    
        public String getVersion()
        {
            return version;
        }
    
        public void setVersion(String version)
        {
            this.version = version;
        }
    
        public String getCopyrightYear()
        {
            return copyrightYear;
        }
    
        public void setCopyrightYear(String copyrightYear)
        {
            this.copyrightYear = copyrightYear;
        }
    
        public boolean isDemoEnabled()
        {
            return demoEnabled;
        }
    
        public void setDemoEnabled(boolean demoEnabled)
        {
            this.demoEnabled = demoEnabled;
        }
    
        public static String getProfile()
        {
            return profile;
        }
    
        public void setProfile(String profile)
        {
            RuoYiConfig.profile = profile;
        }
    
        public static boolean isAddressEnabled()
        {
            return addressEnabled;
        }
    
        public void setAddressEnabled(boolean addressEnabled)
        {
            RuoYiConfig.addressEnabled = addressEnabled;
        }
    
        /**
         * 获取头像上传路径
         */
        public static String getAvatarPath()
        {
            return getProfile() + "/avatar";
        }
    
        /**
         * 获取下载路径
         */
        public static String getDownloadPath()
        {
            return getProfile() + "/download/";
        }
    
        /**
         * 获取上传路径
         */
        public static String getUploadPath()
        {
            return getProfile() + "/upload";
        }
    }

这里的getDownloadPath就是获取设置的下载路径的方法，方法具体实现

public static String getDownloadPath()
        {
            return getProfile() + "/download/";
        }

就是返回profile这个节点

public static String getProfile()
        {
            return profile;
        }

因为使用了@ConfigurationProperties(prefix = "ruoyi")

所以在对应的application.yml中获取profile就是获取ruoyi下的profile的值

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 1][]

这里配置的路径加上/download/再加上一个文件名就是服务器上要下载的模板文件的位置。

所以要提前将此文件放置在服务器上对应的位置。

这里服务器是我本地

然后对文件名进行一个添加时间戳的操作，防止多次下载重名问题。

然后设置响应编码、响应头、响应类型。

然后调用了文件工具类的输出文件到Byte数组的方法writeBytes

方法实现

/**
         * 输出指定文件的byte数组
         *
         * @param filePath 文件路径
         * @param os 输出流
         * @return
         */
        public static void writeBytes(String filePath, OutputStream os) throws IOException
        {
            FileInputStream fis = null;
            try
            {
                File file = new File(filePath);
                if (!file.exists())
                {
                    throw new FileNotFoundException(filePath);
                }
                fis = new FileInputStream(file);
                byte[] b = new byte[1024];
                int length;
                while ((length = fis.read(b)) > 0)
                {
                    os.write(b, 0, length);
                }
            }
            catch (IOException e)
            {
                throw e;
            }
            finally
            {
                if (os != null)
                {
                    try
                    {
                        os.close();
                    }
                    catch (IOException e1)
                    {
                        e1.printStackTrace();
                    }
                }
                if (fis != null)
                {
                    try
                    {
                        fis.close();
                    }
                    catch (IOException e1)
                    {
                        e1.printStackTrace();
                    }
                }
            }
        }

以及下载文件名重新编码的方法setFileDownloadHeader

方法实现

/**
         * 下载文件名重新编码
         *
         * @param request 请求对象
         * @param fileName 文件名
         * @return 编码后的文件名
         */
        public static String setFileDownloadHeader(HttpServletRequest request, String fileName)
                throws UnsupportedEncodingException
        {
            final String agent = request.getHeader("USER-AGENT");
            String filename = fileName;
            if (agent.contains("MSIE"))
            {
                // IE浏览器
                filename = URLEncoder.encode(filename, "utf-8");
                filename = filename.replace("+", " ");
            }
            else if (agent.contains("Firefox"))
            {
                // 火狐浏览器
                filename = new String(fileName.getBytes(), "ISO8859-1");
            }
            else if (agent.contains("Chrome"))
            {
                // google浏览器
                filename = URLEncoder.encode(filename, "utf-8");
            }
            else
            {
                // 其它浏览器
                filename = URLEncoder.encode(filename, "utf-8");
            }
            return filename;
        }

然后根据传递的参数是否删除模板文件，执行删除的工具类方法deleteFile

方法实现

/**
         * 删除文件
         *
         * @param filePath 文件
         * @return
         */
        public static boolean deleteFile(String filePath)
        {
            boolean flag = false;
            File file = new File(filePath);
            // 路径为文件且不为空则进行删除
            if (file.isFile() && file.exists())
            {
                file.delete();
                flag = true;
            }
            return flag;
        }

完整的文件操作工具类代码

package com.ruoyi.common.utils.file;
    
    import java.io.File;
    import java.io.FileInputStream;
    import java.io.FileNotFoundException;
    import java.io.IOException;
    import java.io.OutputStream;
    import java.io.UnsupportedEncodingException;
    import java.net.URLEncoder;
    import javax.servlet.http.HttpServletRequest;
    
    /**
     * 文件处理工具类
     *
     * @author ruoyi
     */
    public class FileUtils
    {
        public static String FILENAME_PATTERN = "[a-zA-Z0-9_\\-\\|\\.\\u4e00-\\u9fa5]+";
    
        /**
         * 输出指定文件的byte数组
         *
         * @param filePath 文件路径
         * @param os 输出流
         * @return
         */
        public static void writeBytes(String filePath, OutputStream os) throws IOException
        {
            FileInputStream fis = null;
            try
            {
                File file = new File(filePath);
                if (!file.exists())
                {
                    throw new FileNotFoundException(filePath);
                }
                fis = new FileInputStream(file);
                byte[] b = new byte[1024];
                int length;
                while ((length = fis.read(b)) > 0)
                {
                    os.write(b, 0, length);
                }
            }
            catch (IOException e)
            {
                throw e;
            }
            finally
            {
                if (os != null)
                {
                    try
                    {
                        os.close();
                    }
                    catch (IOException e1)
                    {
                        e1.printStackTrace();
                    }
                }
                if (fis != null)
                {
                    try
                    {
                        fis.close();
                    }
                    catch (IOException e1)
                    {
                        e1.printStackTrace();
                    }
                }
            }
        }
    
        /**
         * 删除文件
         *
         * @param filePath 文件
         * @return
         */
        public static boolean deleteFile(String filePath)
        {
            boolean flag = false;
            File file = new File(filePath);
            // 路径为文件且不为空则进行删除
            if (file.isFile() && file.exists())
            {
                file.delete();
                flag = true;
            }
            return flag;
        }
    
        /**
         * 文件名称验证
         *
         * @param filename 文件名称
         * @return true 正常 false 非法
         */
        public static boolean isValidFilename(String filename)
        {
            return filename.matches(FILENAME_PATTERN);
        }
    
        /**
         * 下载文件名重新编码
         *
         * @param request 请求对象
         * @param fileName 文件名
         * @return 编码后的文件名
         */
        public static String setFileDownloadHeader(HttpServletRequest request, String fileName)
                throws UnsupportedEncodingException
        {
            final String agent = request.getHeader("USER-AGENT");
            String filename = fileName;
            if (agent.contains("MSIE"))
            {
                // IE浏览器
                filename = URLEncoder.encode(filename, "utf-8");
                filename = filename.replace("+", " ");
            }
            else if (agent.contains("Firefox"))
            {
                // 火狐浏览器
                filename = new String(fileName.getBytes(), "ISO8859-1");
            }
            else if (agent.contains("Chrome"))
            {
                // google浏览器
                filename = URLEncoder.encode(filename, "utf-8");
            }
            else
            {
                // 其它浏览器
                filename = URLEncoder.encode(filename, "utf-8");
            }
            return filename;
        }
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200813163147897.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70
[https_blog.csdn.net_badao_liumang_qizhi]: https://blog.csdn.net/badao_liumang_qizhi
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200813163341751.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70