首页 > 其他分享 >前端 Vue 后端返回流,前端通过流进行下载

前端 Vue 后端返回流,前端通过流进行下载

时间:2025-01-07 17:23:51浏览次数:1  
标签:文件 Vue const url 前端 blob response 下载

前端写法

    //文件下载
    async handleDownload(row) {
      try {
        // 假设文件是通过 GET 请求获取的,url 为文件资源的 API 地址
        const response = await downloadFile(row.id);
        // if (!response.ok) {
        //   throw new Error('网络错误,文件下载失败');
        // }
        // 获取文件内容(Blob)
        const blob = await response;
        if(blob.size == 0){
          this.$modal.msgError("文件不存在!");
          return;
        }
        // 通过 Blob 创建下载链接
        const url = URL.createObjectURL(blob);
        // 创建一个虚拟的 <a> 标签来触发下载
        const a = document.createElement("a");
        a.href = url;
        // 设置下载文件名(你可以从响应中动态获取文件名)
        a.download = row.fileName; // 可以修改为从响应头中获取文件名,例如 response.headers.get('Content-Disposition'
        // 触发下载
        a.click();
        // 释放 Blob URL
        URL.revokeObjectURL(url);
      } catch (error) {
        console.error("文件下载失败:", error);
      }
    },
	
export function downloadFile(id) {
  return request({
    url: '/file/downloadFile/' + id,
    method: 'get',
    responseType: 'blob'
  })
}

后端响应

try {
     // 设置响应头
     response.setContentType(contentType);
     response.setCharacterEncoding("UTF-8");
     response.setHeader("Content-Disposition", "attachment;filename=" + URLEncoder.encode(fileName, "UTF-8"));
     response.setContentLengthLong(fileLength);
	 // 使用 IOUtils 进行文件流拷贝
     try (OutputStream outputStream = response.getOutputStream()) {
          IOUtils.copy(inputStream, outputStream);
       		}
      } catch (IOException e) {
            e.printStackTrace();
            log.info("文件下载出错:" + e.getMessage());
    }

标签:文件,Vue,const,url,前端,blob,response,下载
From: https://www.cnblogs.com/hhs-5120/p/18658003

相关文章

  • Vue ElementUI 树表格
    树表格做懒加载-点击小箭头走接口children为[]则使用hasChildren的true/false来判断是否有子节点,另,如果要做懒加载必须加lazy及load<el-tablev-if="refreshTable"v-loading="loading":data="deptList"lazy:load="load"row-ke......
  • 大学生HTML5期末作业 Web前端网页制作 html5+css3+js html+css+js网页设计 体育 腾讯
    大学生HTML5期末作业Web前端网页制作html5+css3+jshtml+css+js网页设计体育腾讯体育7个页面网页作品代码简单,可使用任意HTML辑软件(如:Dreamweaver、HBuilder、Vscode、Sublime、Webstorm、Text、Notepad++等任意html编辑软件进行运行及修改编辑等操作)。获取源码1......
  • 大学生HTML5期末作业 html+css网页制作 新闻 自定义新闻主题2个页面 Web前端网页制作
    大学生HTML5期末作业html+css网页制作新闻自定义新闻主题2个页面Web前端网页制作html5+css3+js网页作品代码简单,可使用任意HTML辑软件(如:Dreamweaver、HBuilder、Vscode、Sublime、Webstorm、Text、Notepad++等任意html编辑软件进行运行及修改编辑等操作)。获取源......
  • JAVA实现抖音、快手短视频解析去除水印下载无水印视频
    前言之间抖音接口有些变动,导致抖音解析代码失效,现在更新下文章的代码,亲测有效。需要引入的pom文件   <!--hutool工具类-->      <dependency>         <groupId>cn.hutool</groupId>         <artifactId>hutool-all</artifactId......
  • 【详细教程】如何下载腾讯课堂上面的视频课程,腾讯课堂快关闭停运了,如何下载保存课程!
    最近腾讯课堂停止运营,要下架关闭了,这篇文章主要教大家如何下载保存上面的课程前言:很多同学都遇到过购买的网课课程过期了,然后无法观看,花了钱还没学完,血亏。这里教大家一种方法,把腾讯课堂上面快过期的课程下载到电脑本地,然后可以永久观看,再也不用担心过期了~PS:对于腾讯课堂上面已......
  • 前端学习openLayers配合vue3(圆形形状的绘制)
    上节课我们学了加载了矢量图片,这节我们来学绘制圆形关键代码,第一段呢是设置圆点的操作,第二步是点击地图获取地图位置来设置圆点,ol还有很多类,各种形状的//设置圆点//letanchorLayer=newVectorLayer({//source:newVectorSource(),//});//letanchorFeat......
  • 通过 JQuery 使用 POST 的方式下载文件
    <html><head><title>Test</title><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script></head><body><buttonid="downloadButton"......
  • 《前端开发必看!React .tsx vs Vue .vue:深度对比,选型不再纠结!》
    .tsx与.vue的区别......
  • 前端基础知识了解
    前端开发的三要素前端开发的三要素通常指的是HTML、CSS和JavaScript。 HTML(超文本标记语言):HTML是构建网页内容的基础,它使用标签来定义网页的结构和内容,如文本、图像、链接、表格等。例如,<p>标签用于定义段落,<img>标签用于插入图像。 CSS(层叠样式表):CSS用于控制网页的样式......
  • VUE - VUE3使用tsx
    VUE-VUE3使用tsx Vue官方提供了一个插件@vitejs/plugin-vue-jsx来支持JSX语法。以下是使用该插件的具体步骤: 安装插件:使用npm或yarn安装 @vitejs/plugin-vue-jsx。 npminstall@vitejs/plugin-vue-jsx--save-dev  配置Vite:在 vite.config......