当前位置: 首页 > news >正文

跨域情况下,vue如何下载后台接口提供的application/octet-stream文件流Excel文件

前言

由于跨域,所以无法直接通过window.location.href或者a标签直接下载,直接拼后台接口地址又暴露了后台地址,不可行。
所以在这种跨域情况下,本章讲一下vue如何下载后台接口提供的application/octet-stream文件流Excel文件。

功能

实现前端vue下载后台返回的application/octet-stream文件流
1、使用blob类型请求
2、获取到数据后处理成Blob数据
3、通过创建一个a标签,将Blob数据转换成base64数据,放到a标签的url中
4、触发a标签点击事件实现下载Blob数据
5、删除a标签

代码实现

/*** 导出excel* @param fileName* @returns {AxiosPromise}*/
export function exportExcel(fileName){request({url: '/xxx/getCameraXls?fileName='+fileName,method: 'get',responseType:'blob'}).then(res=>{const date = new Date(+new Date() + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '').replace(/\-/g, '').replace(/\:/g, '').replace(/\s*/g, '')const downloadName = fileName +'-'+ date + '.xlsx'downloadFunc(downloadName,res)})
}function downloadFunc(fileName,data){const blob = new Blob([data], { type: `'application/vnd.ms-excel';charset=utf-8` })const downloadElement = document.createElement('a')const href = window.URL.createObjectURL(blob)downloadElement.href = hrefdownloadElement.download = fileNamedocument.body.appendChild(downloadElement)downloadElement.click()document.body.removeChild(downloadElement)window.URL.revokeObjectURL(href)
}

相关文章:

跨域情况下,vue如何下载后台接口提供的application/octet-stream文件流Excel文件

前言 由于跨域,所以无法直接通过window.location.href或者a标签直接下载,直接拼后台接口地址又暴露了后台地址,不可行。 所以在这种跨域情况下,本章讲一下vue如何下载后台接口提供的application/octet-stream文件流Excel文件。 …...

学C的第三十一天【通讯录的实现】

相关代码gitee自取:C语言学习日记: 加油努力 (gitee.com) 接上期: 学C的第三十天【自定义类型:结构体、枚举、联合】_高高的胖子的博客-CSDN博客 通讯录需求: 实现一个通讯录, 通讯录中存放保存人的信息&#xff1…...

Linux操作系统学习,Linux基础命令大全

目录 第一章、Linux简介和安装1.1)Linux简介和分类1.2)安装VMware虚拟机,在虚拟机中安装CentOS 7 第二章、虚拟机中Linux的IP地址配置详解2.1)什么是IP地址,如何查看2.2)虚拟机NAT模式中Linux的IP地址设置有…...

【软件测试】说说你对TDD测试驱动开发的理解?

很多公司在面测试中高级岗时,都会不同程度地问到“有没有了解过TDD”“你认为TDD可以解决什么问题”或者“说说测试驱动开发的流程”等等,即使公司并不会用到此开发流程,面试官也会通过你对这个相对还比较“陌生”的概念的讲述来了解你对一些…...

B. Binary Cafe(二进制的妙用)

题目:Problem - B - Codeforces 总结: 对于该题最简单的方法为使用二进制的数表示状态 例如: 对于一个数7的二进制:111 它的每一位都可表示两种状态我们可以理解为取或者不取 对于7这个数字它可以表示一种状态即在三个位置都…...

SpringBoot单元测试

目录 1.什么是单元测试? 2.单元测试有哪些好处? 3.Spring Boot单元测试使⽤ 单元测试的实现步骤 1. ⽣成单元测试类 2. 添加单元测试代码 2.1 .添加Spring Boot框架测试注解:SpringBootTest 2.2 添加单元测试业务逻辑 简单的断⾔说明 1.什么是单元测试? 单元测试(un…...

刷题 41-45

四十一、移除元素 示例 1: 输入:nums [3,2,2,3], val 3 输出:2, nums [2,2] 解释:函数应该返回新的长度 2, 并且 nums 中的前两个元素均为 2。你不需要考虑数组中超出新长度后面的元素。例如,函数返回的新长度为 2 …...

Centos时间同步

前言 在 Linux 操作系统中,正确的时间同步是非常重要的,因为它对于很多应用程序都是必需的。本文将介绍两种在 Centos 系统中同步当前时间的方式。 方法一:使用 ntpdate 命令同步当前时间 ntpdate 命令是一种简单快捷的同步当前时间的方式&a…...

Linux 查看磁盘空间

1 查看当前目录的总大小 :du -sh ps:du(disk usage) 2 查看某个目录的总大小:du -sh 目录名 3 查找出/目录下占用空间最大的前10个文件或者文件夹:sudo du -a / | sort -n -r | head -n 10 4 查看磁盘信息:df -h...

我的会议(我的审批,会议签字附源码)

目录 前言: 3.我的审批: 3.1实现的特色功能: 3.2显示的效果 3.3思路: 3.4寻找相关的案例或者自己使用JavaScript去写一个类似的功能 3.5具体的步骤: 3.5.1添加静态的jsp代码(我的审批数据的显示&…...

Python 装饰器该如何理解?

哈喽大家好,今天带大家了解下在Python中装饰器的使用 定义 首先我们先来了解下装饰器的定义。顾名思义,在Python中,装饰器本质上就是一个函数,它可以接收一个函数作为参数,然后返回一个新的函数。这个新的函数可以在…...

IDEA 模块不加载依旧是灰色 没有变成小蓝色的方块

Settings > Build, Execution, Deployment > Build Tools > Maven > Ignored Files下降对应的模块勾选掉 但通常在Maven的配置中,您会找到一个名为“ignoredFiles”的列表,其中包含被忽略的文件和目录。您可以通过取消选中所需的文件或目录…...

可以写进简历的kafka优化-----吞吐量提升一倍的方法

冲突 在看到项目工程里kafka 生产端配置的batch.size为500,而实际业务数据平均有1K大小的时候;我有点懵了。是的,这里矛盾了;莫非之前的作者认为这个batch.size是发送的条数,而不是kafka生产端内存缓存记录的大小&…...

JavaScript中,for in 和for of的区别

for in 遍历的是数组的索引(即键名),而 for of 遍历的是数组元素值(即键值)。for...in 循环出的是 key,for...of 循环出的是 value 推荐在循环对象属性的时候使用 for...in,在遍历数组的时候的时…...

计算机毕设 深度学习手势识别 - yolo python opencv cnn 机器视觉

文章目录 0 前言1 课题背景2 卷积神经网络2.1卷积层2.2 池化层2.3 激活函数2.4 全连接层2.5 使用tensorflow中keras模块实现卷积神经网络 3 YOLOV53.1 网络架构图3.2 输入端3.3 基准网络3.4 Neck网络3.5 Head输出层 4 数据集准备4.1 数据标注简介4.2 数据保存 5 模型训练5.1 修…...

vue3 axios接口封装

在Vue 3中,可以通过封装axios来实现接口的统一管理和调用。封装后的接口调用更加简洁,代码可维护性也更好。以下是一个简单的Vue 3中axios接口封装的示例: 1.首先,安装axios和qs(如果需要处理复杂数据)&am…...

誉天程序员-2301-3-day08

4. 书籍管理实现CURD 这个结构比较复杂,是有一套复杂的机制,注意它们之间的关系和控制实现。  新增和修改怎么复用对话框  对话框中的数据,表格中展现的数据,临时记录正在操作的数据统一联动起来  单条删除怎么传递数据&am…...

Python爬虫(1)一次性搞定Selenium(新版)8种find_element元素定位方式

selenium中有8种不错的元素定位方式,每个方式和应用场景都不一样,需要根据自己的使用情况来进行修改 8种find_element元素定位方式 1.id定位2.CSS定位3.XPATH定位4.name定位5.class_name定位6.Link_Text定位7.PARTIAL_LINK_TEXT定位8.TAG_NAME定位总结 …...

前端(十一)——Vue vs. React:两大前端框架的深度对比与分析

😊博主:小猫娃来啦 😊文章核心:Vue vs. React:两大前端框架的深度对比与分析 文章目录 前言概述原理与设计思想算法生态系统与社区支持API与语法性能与优化开发体验与工程化对比总结结语 前言 在当今快速发展的前端领…...

三分钟白话RocketMQ系列—— 核心概念

目录 关键字摘要 Q1:RocketMQ是什么? Q2: 作为消息中间件,RocketMQ和kafka有什么区别? Q3: RocketMQ的基本架构是怎样的? Q4:RocketMQ有哪些核心概念? 总结 RocketMQ是一个开源的分布式消…...

MVC 数据库

MVC 数据库 引言 在软件开发领域,Model-View-Controller(MVC)是一种流行的软件架构模式,它将应用程序分为三个核心组件:模型(Model)、视图(View)和控制器(Controller)。这种模式有助于提高代码的可维护性和可扩展性。本文将深入探讨MVC架构与数据库之间的关系,以…...

如何在看板中有效管理突发紧急任务

在看板中有效管理突发紧急任务需要:设立专门的紧急任务通道、重新调整任务优先级、保持适度的WIP(Work-in-Progress)弹性、优化任务处理流程、提高团队应对突发情况的敏捷性。其中,设立专门的紧急任务通道尤为重要,这能…...

论文解读:交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架(一)

宇树机器人多姿态起立控制强化学习框架论文解析 论文解读:交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架(一) 论文解读:交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化…...

2025盘古石杯决赛【手机取证】

前言 第三届盘古石杯国际电子数据取证大赛决赛 最后一题没有解出来,实在找不到,希望有大佬教一下我。 还有就会议时间,我感觉不是图片时间,因为在电脑看到是其他时间用老会议系统开的会。 手机取证 1、分析鸿蒙手机检材&#x…...

均衡后的SNRSINR

本文主要摘自参考文献中的前两篇,相关文献中经常会出现MIMO检测后的SINR不过一直没有找到相关数学推到过程,其中文献[1]中给出了相关原理在此仅做记录。 1. 系统模型 复信道模型 n t n_t nt​ 根发送天线, n r n_r nr​ 根接收天线的 MIMO 系…...

微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据

微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据 Power Query 具有大量专门帮助您清理和准备数据以供分析的功能。 您将了解如何简化复杂模型、更改数据类型、重命名对象和透视数据。 您还将了解如何分析列,以便知晓哪些列包含有价值的数据,…...

搭建DNS域名解析服务器(正向解析资源文件)

正向解析资源文件 1)准备工作 服务端及客户端都关闭安全软件 [rootlocalhost ~]# systemctl stop firewalld [rootlocalhost ~]# setenforce 0 2)服务端安装软件:bind 1.配置yum源 [rootlocalhost ~]# cat /etc/yum.repos.d/base.repo [Base…...

day36-多路IO复用

一、基本概念 (服务器多客户端模型) 定义:单线程或单进程同时监测若干个文件描述符是否可以执行IO操作的能力 作用:应用程序通常需要处理来自多条事件流中的事件,比如我现在用的电脑,需要同时处理键盘鼠标…...

论文阅读:LLM4Drive: A Survey of Large Language Models for Autonomous Driving

地址:LLM4Drive: A Survey of Large Language Models for Autonomous Driving 摘要翻译 自动驾驶技术作为推动交通和城市出行变革的催化剂,正从基于规则的系统向数据驱动策略转变。传统的模块化系统受限于级联模块间的累积误差和缺乏灵活性的预设规则。…...

【堆垛策略】设计方法

堆垛策略的设计是积木堆叠系统的核心,直接影响堆叠的稳定性、效率和容错能力。以下是分层次的堆垛策略设计方法,涵盖基础规则、优化算法和容错机制: 1. 基础堆垛规则 (1) 物理稳定性优先 重心原则: 大尺寸/重量积木在下&#xf…...