RuoYi-Vue以流的方式下载文件

7 篇文章 4 订阅
6 篇文章 0 订阅

1. 前端导入请求类

 import service from "@/utils/request";

2. 前端编写下载方法

 methods: {
 	/**
     * 下载文件按钮操作
     * @param name 文件名
     */
    handleDownload(name) {
      let filename = name;
      return service
        .post(
          "/monitor/logger/file/download/" + filename,
          {},
          {
            headers: {
              "Content-Type": "application/x-www-form-urlencoded",
            },
            responseType: "blob",
          }
        )
        .then((data) => {
          let fileReader = new FileReader();
          fileReader.onload = () => {
            try {
              let { code, msg } = JSON.parse(fileReader.result);
              if (code !== 200) this.msgError(msg || "下载失败");
            } catch (err) {
              //console.error(err);
              const content = data;
              const blob = new Blob([content]);
              if ("download" in document.createElement("a")) {
                const elink = document.createElement("a");
                elink.download = filename;
                elink.style.display = "none";
                elink.href = URL.createObjectURL(blob);
                document.body.appendChild(elink);
                elink.click();
                URL.revokeObjectURL(elink.href);
                document.body.removeChild(elink);
              } else {
                navigator.msSaveBlob(blob, filename);
              }
            }
          };
          fileReader.readAsText(data);
        })
        .catch((r) => {
          console.error(r);
        });
    },
 }

3. 后端方法

 /**
     * 日志文件下载
     * 
     * @param fileName 文件名称
     * @return
     */
    @PreAuthorize("@ss.hasPermi('monitor:logger:file:download')")
    @PostMapping("/file/download/{fileName}")
    public void download(@PathVariable("fileName")String fileName, HttpServletResponse response) throws Exception
    {
        if (StringUtils.isEmpty(fileName))
        {
            throw new Exception("文件名称无效");
        }
        String logPath = getLogPath();
        if (StringUtils.isEmpty(logPath))
        {
            throw new Exception("未找到日志文件目录");
        }
        String filePath = "";
        File directory = new File(logPath);
        List<File> files = (List<File>) FileUtils.listFiles(directory, null, true);
        for (File file : files)
        {
            if (file.getName().equals(fileName) && file.isFile() && file.exists())
            {
                filePath = file.getPath();
                break;
            }
        }
        if (StringUtils.isEmpty(filePath))
        {
            throw new Exception("没有找到文件!");
        }
        response.setContentType(MediaType.APPLICATION_OCTET_STREAM_VALUE);
        FileUtils.writeBytes(filePath, response.getOutputStream());
    }

返回文件关键部分

response.setContentType(MediaType.APPLICATION_OCTET_STREAM_VALUE);
FileUtils.writeBytes(filePath, response.getOutputStream());
ruoyi-vue 是一个项目,它提供了文件上传和下载的功能。在该项目中,文件上传的代码位于`com.ruoyi.web.controller.common`包下。你可以通过点击页面上的按钮来触发文件上传操作。在上传之前,前端会对文件类型进行预先判断,只有符合要求的文件类型(如jpg和png)才能上传成功。如果文件类型错误,前端会给出相应的提示信息。 需要注意的是,在ruoyi-vue项目中,如果你上传的文件放在/upload/目录下,是无法立即进行下载的。你需要新建一个/download/目录,并将/upload/目录下的文件复制到/download/目录中,这样才能进行文件下载的测试。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [若依-vue 前后端分离项目分析-文件上传、下载](https://blog.csdn.net/weixin_43677689/article/details/125667825)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *3* [Ruoyi框架学习--上传和下载](https://blog.csdn.net/qq_39367410/article/details/126829563)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Mr.李大哥

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值