Ruoyi若依框架下载流程详细解读(SpringBoot-Vue)

news2024/9/20 12:37:06

图解:

前端设计:

前端设计一个link文字连接或者按钮(ElementUI)Element - The world's most popular Vue UI framework

前端请求设计:

import request from '@/utils/request'
//下载示例模型定义语言的JSON
export const publishExportTemplateFile = (res, name, type = false) => {
  let url;
  if (type) {
    url = window.URL.createObjectURL(new Blob([res], {type: 'application/json5'}));//application后短语相应类型,// Important blob类型接收
  } else {
    url = window.URL.createObjectURL(new Blob([res]));
  }
  // const url = window.URL.createObjectURL(new Blob([res]));
  const link = document.createElement('a');
  link.style.display = 'none';
  link.href = url;
  link.setAttribute('download', name);
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}

export function downloadFile(filePath) {
  return request({
    url: '/configuration/download',
    method: 'get',
    params: { fileName: filePath, delete: false },
    responseType: 'blob' // 设置响应类型为 blob
  })
}

其中 publishExportTemplateFile 函数用于处理文件下载的前端逻辑,而 downloadFile 函数用于发起后端请求获取文件。

前端Vue组件

<template>
      <el-link type="primary" @click="download(filename)">下载示例配置文件</el-link>
</template>

<script>
import {downloadFile,publishExportTemplateFile } from "@/api/register/register";
export default {
  data() {
      return {
           filename:"template.json5"
      }
    },
methods(){
    download(filename){
      downloadFile(filename).then(response => {
        publishExportTemplateFile(response, filename);
      }).catch(error => {
        console.error('Download file failed:', error);
      });
    },
}
};
</script>

<style>

</style>

后端Controller:

@GetMapping("/download")
public void fileDownload(String fileName, Boolean delete, HttpServletResponse response, HttpServletRequest request) {
    try {
        if (!FileUtils.checkAllowDownload(fileName)) {
            throw new Exception(StringUtils.format("文件名称({})非法,不允许下载。 " , fileName));
        }
        String realFileName = System.currentTimeMillis() + fileName.substring(fileName.indexOf("_") + 1);
        System.out.println("realFileName = " + realFileName);
        String filePath = RuoYiConfig.getDownloadPath() + fileName; //注意这里的路径要和你下载的路径对应
        response.setContentType(MediaType.APPLICATION_OCTET_STREAM_VALUE);
        FileUtils.setAttachmentResponseHeader(response, realFileName);
        FileUtils.writeBytes(filePath, response.getOutputStream());
        if (delete) {
            FileUtils.deleteFile(filePath);
        }
    } catch (Exception e) {
        log.error("下载文件失败", e);
    }
}

后端Utils:

//从全局配置文件获取下载文件所在目录(src/main/java/com/ruoyi/common/config/RuoYiConfig.java)
@Component
@ConfigurationProperties(prefix = "ruoyi")
public class RuoYiConfig{
        public static String getProfile()
        {
            return profile;
        }

        public void setProfile(String profile)
        {
            RuoYiConfig.profile = profile;
        }
/**
 * 获取下载路径
 */
        public static String getDownloadPath()
        {
            return getProfile() + "/download/";
        }
        /** 上传路径 */
        private static String profile
//文件相关操作
public class FileUtils extends FileUtil {

    /**
     * 下载文件名重新编码
     *
     * @param response     响应对象
     * @param realFileName 真实文件名
     */
    public static void setAttachmentResponseHeader(HttpServletResponse response, String realFileName) throws UnsupportedEncodingException {
        String percentEncodedFileName = percentEncode(realFileName);

        StringBuilder contentDispositionValue = new StringBuilder();
        contentDispositionValue.append("attachment; filename=")
            .append(percentEncodedFileName)
            .append(";")
            .append("filename*=")
            .append("utf-8''")
            .append(percentEncodedFileName);

        response.addHeader("Access-Control-Expose-Headers", "Content-Disposition,download-filename");
        response.setHeader("Content-disposition", contentDispositionValue.toString());
        response.setHeader("download-filename", percentEncodedFileName);
    }
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
    {
        IOUtils.close(os);
        IOUtils.close(fis);
    }
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1544665.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

C++函数模板详解(结合代码)

目录 1. 模板概念 2. 函数模板语法 3. 函数模板注意事项 4. 函数模板案例 5. 普通函数与函数模板的区别 6. 普通函数与函数模板的调用规则 7. 模板的局限性 1. 模板概念 在C中&#xff0c;模板是一种通用的程序设计工具&#xff0c;它允许我们处理多种数据类型而不是固…

MVC与MVVM:两种前端架构模式对比

&#x1f90d; 前端开发工程师、技术日更博主、已过CET6 &#x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 &#x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 &#x1f35a; 蓝桥云课签约作者、上架课程《Vue.js 和 E…

FMEA与智能机器人:提升机器人可靠性与安全性的关键

随着科技的飞速发展&#xff0c;智能机器人已经深入到我们生活的方方面面&#xff0c;从工业生产到家庭服务&#xff0c;从深海探险到太空探索&#xff0c;处处都有它们的身影。然而&#xff0c;随着应用的日益广泛&#xff0c;机器人系统的复杂性和不确定性也在增加&#xff0…

elasticsearch 8.12+kibana 8.12

准备工作&#xff1a;1.下载相关的安装包放到/usr/local/ES下面 elasticsearch下载地址:Download Elasticsearch | Elastic elasticsearch-head-master下载地址:https://github.com/mobz/elasticsearch-head/archive/master.zip node下载地址:Index of /dist/ kibana地址:Downl…

Facebook是什么?有什么功能?如何利用Facebook运营?

Facebook&#xff0c;也常被人们称为“脸书”、“脸谱”等&#xff0c;是美国的社交网络服务及社会化媒体网站&#xff0c;拥有超过20亿的月活跃用户&#xff0c;对于众多商家而言&#xff0c;Facebook以其广泛的用户基础和强大的社交影响力&#xff0c;成为了一个理想的社媒营…

(三)Qt+OpenCV调用海康工业相机SDK抓拍示例

系列文章目录 提示&#xff1a;这里是该系列文章的所有文章的目录 第一章&#xff1a; &#xff08;一&#xff09;QtOpenCV调用海康工业相机SDK示例开发 第二章&#xff1a; &#xff08;二&#xff09;Qt多线程实现海康工业相机图像实时采集 第三章&#xff1a; &#xff08;…

STM32存储左右互搏 SPI总线FATS文件读写SD/MicroSD/TF卡

STM32存储左右互搏 SPI总线FATS文件读写SD/MicroSD/TF卡 SD/MicroSD/TF卡是基于FLASH的一种常见非易失存储单元&#xff0c;由接口协议电路和FLASH构成。市面上由不同尺寸和不同容量的卡&#xff0c;手机领域用的TF卡实际就是MicroSD卡&#xff0c;尺寸比SD卡小&#xff0c;而…

iOS - Runtime-isa详解(位域、union(共用体)、位运算)

文章目录 iOS - Runtime-isa详解&#xff08;位域、union&#xff08;共用体&#xff09;、位运算&#xff09;前言1. 位域介绍1.1 思路1.2 示例 - 结构体1.3 示例 - union&#xff08;共用体&#xff09;1.3.1 说明 1.4 结构体 对比 union&#xff08;共用体&#xff09; 2. a…

【python--罗马数字转换阿拉伯数字】

&#x1f680; 作者 &#xff1a;“码上有前” &#x1f680; 文章简介 &#xff1a;Python &#x1f680; 欢迎小伙伴们 点赞&#x1f44d;、收藏⭐、留言&#x1f4ac; 罗马数字转换阿拉伯数字相关 根据长度给出罗马序列的值生成字典根据长度给出罗马序列的值生成列表将所有…

酷开系统让用户和电视双向传递,酷开科技实现商业变现

电视在我们的日常生活中扮演着重要的角色。虽然&#xff0c;作为客厅C位的扛把子——电视的娱乐作用深入人心&#xff0c;但是&#xff0c;它的涵义和影响力却因我们每个人的具体生活环境而存在着种种差异&#xff0c;而我们的生活环境又受到我们所处的社会及文化环境的影响。 …

原生 HTML/CSS/JS 实现右键菜单和二级菜单

文章来源&#xff1a;www.huhailong.vip 站点 文章源地址&#xff1a;https://www.huhailong.vip/article/1764653112011841538 Demo效果演示地址 先看效果图 {{{width“auto” height“auto”}}} 需要注意的就是边界检测处理&#xff0c;到极端点击底部和右侧时如果不做处理会…

【网络爬虫】(2) requests模块,案例:网络图片爬取,附Python代码

1. 基本原理 1.1 requests 模块 requests 是 Python 中一个非常流行的 HTTP 客户端库&#xff0c;用于发送所有的 HTTP 请求类型。它基于 urllib&#xff0c;但比 urllib 更易用。 中文文档地址&#xff1a;Requests: 让 HTTP 服务人类 — Requests 2.18.1 文档 &#xff0…

centos 虚拟机 增加硬盘 虚拟机centos磁盘扩容

2 在centos 7 系统中挂载磁盘 2.1 查看磁盘信息 进入centos 7系统中&#xff0c;输入“# df -h”命令&#xff0c;查看磁盘信息。 这里没有写显示新增的磁盘信息。 2.2 对新加的磁盘进行分区操作 2.2.1 查看磁盘容量和分区 2.2.2 创建分区 a. 选择新增的磁盘&#xff08;这…

游戏本续航@控制中心的省电模式效果如何

文章目录 节能模式长续航模式&#x1f47a;相关工具 节能模式长续航模式&#x1f47a; 蓝天模具Control Center中的模式 根据我的试验,以及软件的提示,可以发现 Power Saving是最省电的,儿Quiet模式并不省电,它会启用独立显卡,只不过风扇的转速不像娱乐模式和性能模式那么积极而…

前端删除列表数据后页码重置逻辑

问题描述 需要调整页码的例子&#xff1a; 列表一共有10页数据&#xff0c;用户把第10页数据全部删除后&#xff0c;需要把数据重置成上一页&#xff0c;也就是第9页 不用调整页码的例子&#xff1a; 列表一共有1页数据&#xff0c;用户把本页数据全部删除后&#xff0c;页码…

代码随想录day30(2)回溯:组合(leetcode77)

题目要求&#xff1a;给定两个整数 n 和 k&#xff0c;返回 1 ... n 中所有可能的 k 个数的组合。 思路&#xff1a;首先定义两个变量&#xff0c;一个存放符合条件的单一结果&#xff0c;另一个存放符合条件结果的集合&#xff0c;for循环用来横向遍历&#xff0c;递归用来纵…

Mac电脑虚拟显示器:BetterDisplay Pro for Mac v2.0.11激活版

BetterDisplay Pro是一款由waydabber开发的Mac平台上的显示器校准软件&#xff0c;可以帮助用户调整显示器的颜色和亮度&#xff0c;以获得更加真实、清晰和舒适的视觉体验。 软件下载&#xff1a;BetterDisplay Pro for Mac v2.0.11激活版 以下是BetterDisplay Pro的主要特点&…

8.软件工程

整个章节偏向于记忆、背诵&#xff1b; 主要议题&#xff1a; 软件体系&#xff1a;3层&#xff1b; UML重点&#xff0c;重点记3要素中的关系、图&#xff1b; 1.软件体系结构 分层 优点&#xff1a;利于软件的重复利用&#xff1b; 缺点&#xff1a;以什么方式分层&#…

2024 Python3.10 系统入门+进阶(三):Python变量类型和运算符

目录 一、Python变量的定义和使用二、Python整数类型&#xff08;int&#xff09;详解三、Python小数/浮点数&#xff08;float&#xff09;类型详解四、Python复数类型(complex)详解---了解五、Python字符串详解(包含长字符串和原始字符串)5.1 处理字符串中的引号5.2 字符串的…

【Linux系统】冯诺依曼与操作系统

什么是冯诺依曼体系结构&#xff1f; 如图即为冯诺依曼大致的体系结构图&#xff0c; 我们知道这些都是由我们的计算机硬件组成 输入设备&#xff1a;键盘&#xff0c; 鼠标&#xff0c; 摄像头&#xff0c; 话筒&#xff0c; 磁盘&#xff0c; 网卡... 输出设备&#xff1a…