vue-axios+springboot实现文件流下载

news2024/12/25 20:51:35

前端vue代码:

<template>
  <div class="app-container documentation-container">
    <div>
      <el-button type="primary" @click="downloadFile('test.xlsx')">下载test.xlsx</el-button>
    </div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'Documentation',
  data() {
    return {
    }
  },
  methods: {
    downloadFile(fileName) {
      axios.get('http://localhost:8081/t/downloadFile/' + fileName, {
        responseType: 'blob'
      })
        .then(function (response) {
          // 处理成功情况
          console.log("res:", response);
          if (response.headers['content-Disposition'] || response.headers['content-type'] == 'application/octet-stream') {
            console.log(11);
            let data = response.data;
            console.log('data', data);
            let blob = new Blob([data], {type: 'application/octet-stream'});
            let href = window.URL.createObjectURL(blob);
            let aElement = document.createElement('a');
            aElement.setAttribute('download', fileName);
            aElement.href = href;
            document.body.appendChild(aElement);
            aElement.click();
            document.body.removeChild(aElement);
            window.URL.revokeObjectURL(href); // 释放blob对象
          }
        })
        .catch(function (error) {
          // 处理错误情况
          console.log(error);
        });
    },
  }
}
</script>

后端代码:

@RestController
@RequestMapping("/t")
public class TestController {

    @CrossOrigin
    @RequestMapping("/downloadFile/{fileName}")
    public void downloadFile(HttpServletResponse response, @PathVariable("fileName") String fileName) throws IOException {
        String filePath = "excel/" + fileName;
        File file = new File(filePath);
        if (!file.getParentFile().exists()) {
            file.getParentFile().mkdir();
            if (!file.exists()) {
                file.createNewFile();
            }
        }

        //        response.addHeader("Content-Disposition", "attachment;filename=" + URLEncoder.encode(fileName, "UTF-8"));
        response.addHeader(HttpHeaders.CONTENT_DISPOSITION, ContentDisposition.attachment().filename(fileName, StandardCharsets.UTF_8).build().toString());
        response.addHeader(HttpHeaders.CONTENT_TYPE, MediaType.APPLICATION_OCTET_STREAM_VALUE);
        FileInputStream fileInputStream = new FileInputStream(file);
        ServletOutputStream outputStream = response.getOutputStream();
        byte[] buff = new byte[1024];
        int len = 0;
        while ((len = fileInputStream.read(buff)) != -1) {
            outputStream.write(buff, 0, len);
        }
        outputStream.flush();
        outputStream.close();
        fileInputStream.close();
    }
}

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

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

相关文章

Flutter组件————Scaffold

Scaffold Scaffold 是一个基础的可视化界面结构组件&#xff0c;它实现了基本的Material Design布局结构。使用 Scaffold 可以快速地搭建起包含应用栏&#xff08;AppBar&#xff09;、内容区域&#xff08;body&#xff09;、抽屉菜单&#xff08;Drawer&#xff09;、底部导…

【数据结构】数据结构整体大纲

数据结构用来干什么的&#xff1f;很简单&#xff0c;存数据用的。 &#xff08;这篇文章仅介绍数据结构的大纲&#xff0c;详细讲解放在后面的每一个章节中&#xff0c;逐个击破&#xff09; 那为什么不直接使用数组、集合来存储呢 ——> 如果有成千上亿条数据呢&#xff…

搭建Elastic search群集

一、实验环境 二、实验步骤 Elasticsearch 是一个分布式、高扩展、高实时的搜索与数据分析引擎Elasticsearch目录文件&#xff1a; /etc/elasticsearch/elasticsearch.yml#配置文件 /etc/elasticsearch/jvm.options#java虚拟机 /etc/init.d/elasticsearch#服务启动脚本 /e…

链原生 Web3 AI 网络 Chainbase 推出 AVS 主网, 拓展 EigenLayer AVS 场景

在 12 月 4 日&#xff0c;链原生的 Web3 AI 数据网络 Chainbase 正式启动了 Chainbase AVS 主网&#xff0c;同时发布了首批 20 个 AVS 节点运营商名单。Chainbase AVS 是 EigenLayer AVS 中首个以数据智能为应用导向的主网 AVS&#xff0c;其采用四层网络架构&#xff0c;其中…

玩转OCR | 探索腾讯云智能结构化识别新境界

&#x1f4dd;个人主页&#x1f339;&#xff1a;Eternity._ &#x1f339;&#x1f339;期待您的关注 &#x1f339;&#x1f339; ❀ 玩转OCR 腾讯云智能结构化识别产品介绍服务应用产品特征行业案例总结 腾讯云智能结构化识别 腾讯云智能结构化OCR产品分为基础版与高级版&am…

生信软件开发2 - 使用PyQt5开发一个简易GUI程序

往期文章&#xff1a; 生信软件开发1 - 设计一个简单的Windwos风格的GUI报告软件 1. 使用PyQt5设计一个计算器主程序 要求PyQt5 > 5.6, calculator.py与MainWindow.py处于同一目录&#xff0c;下载mainwindow-weird.ui和mainwindow.ui资源&#xff0c;运行calculator.py即…

“计算几何”简介

计算几何&#xff08;Computational Geometry&#xff09;简单来说就是用计算机解决几何问题。 Computational指“using or connected with computers使用计算机的&#xff1b;与计算机有关的”&#xff0c;Geometry指“the branch of mathematics that deals with the measur…

TowardsDataScience 博客中文翻译 2018~2024(一百二十三)

TowardsDataScience 博客中文翻译 2018~2024&#xff08;一百二十三&#xff09; 引言 从 2018 年到 2024 年&#xff0c;数据科学的进展超越了许多技术领域的速度。Towards Data Science 博客依然是这个领域的关键平台&#xff0c;记录了从基础工具到前沿技术的多方面发展。…

GitHub 桌面版配置 |可视化界面进行上传到远程仓库 | gitLab 配置【把密码存在本地服务器】

&#x1f947; 版权: 本文由【墨理学AI】原创首发、各位读者大大、敬请查阅、感谢三连 &#x1f389; 声明: 作为全网 AI 领域 干货最多的博主之一&#xff0c;❤️ 不负光阴不负卿 ❤️ 文章目录 桌面版安装包下载clone 仓库操作如下GitLab 配置不再重复输入账户和密码的两个方…

今天最新早上好问候语精选大全,每天问候,相互牵挂,彼此祝福

1、朋友相伴&#xff0c;友谊真诚永不变&#xff01;彼此扶持绿树荫&#xff0c;共度快乐雨后天&#xff01;一同分享的表情&#xff0c;愿我们友情长存&#xff0c;一生相伴永相连&#xff01; 2、人生几十年&#xff0c;苦累伴酸甜&#xff0c;风华不再茂&#xff0c;雄心非当…

Verdi -- 打开Consol,创建和执行tcl命令举例

1.Verdi打开Console的步骤&#xff1a; For ref: 2创建tcl脚本. tcl脚本路径&#xff1a; 在Makefile下&#xff0c;与.v文件在同一个目录8_demo这个文件夹下。 font.tcl代码内容&#xff1a; verdiSetFont -monoFont "Courier" -monoFontSize "24" 作用…

基于java博网即时通讯软件的设计与实现【源码+文档+部署讲解】

目 录 1. 绪 论 1.1. 开发背景 1.2. 开发意义 2. 系统设计相关技术 2.1 Java语言 2.2 MySQL数据库 2.3 Socket 3. 系统需求分析 3.1 可行性分析 3.2 需求分析 3.3 系统流程图 3.4 非功能性需求 4. 系统设计 4.1 系统功能结构 4.2 数据库设计 5. 系统实现 5.…

视频汇聚融合云平台Liveweb一站式解决视频资源管理痛点

随着5G技术的广泛应用&#xff0c;各领域都在通信技术加持下通过海量终端设备收集了大量视频、图像等物联网数据&#xff0c;并通过人工智能、大数据、视频监控等技术方式来让我们的世界更安全、更高效。然而&#xff0c;随着数字化建设和生产经营管理活动的长期开展&#xff0…

Hadoop集群(HDFS集群、YARN集群、MapReduce​计算框架)

一、 简介 Hadoop主要在分布式环境下集群机器&#xff0c;获取海量数据的处理能力&#xff0c;实现分布式集群下的大数据存储和计算。 其中三大核心组件: HDFS存储分布式文件存储、YARN分布式资源管理、MapReduce分布式计算。 二、工作原理 2.1 HDFS集群 Web访问地址&…

文本的AIGC率检测原理

背景 你可能在学生群里或者视频中看过这样的消息&#xff1a;“我们学校要求论文AI率不能超过30%&#xff01;”、“你们学校查AI率吗&#xff1f;”之类的&#xff0c;这些消息到底是真是假&#xff1f; 随着人工智能的快速发展和广泛应用&#xff0c;不论是工作中还是学生学…

PODS:2024-12-21由麻省理工学院 和 OpenAI联合创建一个专门为个性化对象识别任务设计的数据集.

2024-12-21&#xff0c;由MIT和OpenAI联合创建的个性化视觉数据集&#xff0c;为细粒度和数据稀缺的个性化视觉任务提供了新的解决方案&#xff0c;推动了个性化模型的发展&#xff0c;具有重要的研究和应用价值。 一、研究背景&#xff1a; 在计算机视觉领域&#xff0c;现代…

OpenFeign快速入门 示例:黑马商城

使用起因 之前我们利用了Nacos实现了服务的治理,利用RestTemplate实现了服务的远程调用。这样一来购物车虽然通过远程调用实现了调用商品服务的方法,但是远程调用的代码太复杂了: 解决方法 并且这种调用方式比较复杂&#xff0c;一会儿远程调用&#xff0c;一会儿本地调用。 因…

YOLOv11模型改进-模块-引入多尺度大核注意力Multi-scale Large Kernel Attention

MLKA 的提出源于图像超分辨率任务的挑战性&#xff0c;该任务需重建低质量图像缺失的高频信息&#xff0c;但因 LR 与 HR 图像对应关系复杂&#xff0c;寻找像素相关性困难。此前模型扩展容量的方法增加了训练负担和数据收集成本&#xff0c;而采用的注意力机制无法同时获取局部…

学习思考:一日三问(学习篇)之匹配VLAN

学习思考&#xff1a;一日三问&#xff08;学习篇&#xff09;之匹配VLAN 一、学了什么&#xff08;是什么&#xff09;1.1 理解LAN与"V"的LAN1.2 理解"V"的LAN怎么还原成LAN1.3 理解二层交换机眼中的"V"的LAN 二、为何会产生需求&#xff08;为…

国际网络专线怎么申请开通?

随着国内企业在国际市场中的活跃度逐年提升&#xff0c;国际网络专线逐渐成为保障企业高效运营的重要基础设施。稳定且高效的网络不仅能够提升工作效率&#xff0c;还能为海外业务的顺利开展提供可靠保障。那么&#xff0c;国际网络专线如何开通&#xff1f;其申请流程是怎样的…