vue实现文件流形式的导出下载
文章目录
- Vue 项目中下载返回的文件流操作步骤
- 一、使用 Axios 请求文件流数据
- 二、设置响应类型为 ‘blob’
- 三、创建下载链接并触发下载
- 四、在 Vue 组件中集成下载功能
- 五、解释与实例说明
- 1、使用 Axios 请求文件流数据:
- 设置响应类型为 'blob':
- 创建下载链接并触发下载:
- 下载文件,文件名获取不到
Vue 项目中下载返回的文件流操作步骤
1、使用 Axios 请求文件流数据;
2、设置响应类型为 ‘blob’;
3、创建下载链接并触发下载。
其中,最关键的一步是创建一个 Blob 对象并使用 URL.createObjectURL 方法生成一个下载链接。以下将详细说明如何实现。
一、使用 Axios 请求文件流数据
在 Vue 项目中,需要使用 Axios 来发送请求并获取文件流数据。可以在组件中使用 Axios 进行 HTTP 请求,确保在请求头中设置适当的响应类型。
import axios from 'axios';export default {methods: {downloadFile() {axios({method: 'get',url: 'your-file-endpoint', // 替换为实际的文件流接口params:{},responseType: 'blob'}).then(response => {this.handleFileDownload(response.data);}).catch(error => {console.error('Error downloading the file', error);});}}
};
二、设置响应类型为 ‘blob’
在 Axios 请求中,设置 responseType 为 ‘blob’,这样 Axios 会将响应数据处理为 Blob 对象。Blob 对象表示一个不可变的、原始数据的类文件对象。
三、创建下载链接并触发下载
为了触发文件下载,需要创建一个 URL 链接并模拟点击事件。可以在组件中添加一个方法来处理 Blob 数据并进行下载。
methods: {/*** 拿到文件流后的下载的方法* @param {*} data* @param {*} filename* @param {*} mime* @param {*} bom*/function downloadByData(data: BlobPart, filename: string, mime?: string, bom?: BlobPart) {const blobData = typeof bom !== 'undefined' ? [bom, data] : [data];const blob = new Blob(blobData, { type: mime || 'application/octet-stream' });if (typeof window.navigator.msSaveBlob !== 'undefined') {window.navigator.msSaveBlob(blob, filename);} else {const blobURL = window.URL.createObjectURL(blob);const tempLink = document.createElement('a');tempLink.style.display = 'none';tempLink.href = blobURL;tempLink.setAttribute('download', filename);if (typeof tempLink.download === 'undefined') {tempLink.setAttribute('target', '_blank');}document.body.appendChild(tempLink);tempLink.click();// 移除 a 标签document.body.removeChild(tempLink); // 释放 URL 对象window.URL.revokeObjectURL(blobURL);}}
}
四、在 Vue 组件中集成下载功能
<template><div><button @click="downloadFile">Download File</button></div>
</template>
<script lang="ts" setup>// 下载
async function downloadFile() {try {axios({method: 'get',url: 'your-file-endpoint', // 替换为实际的文件流接口params: {}, // 请求参数responseType: 'blob'}).then((response) => {console.log('downloadByData',response)if(response.headers['content-disposition']) {let fileName = response.headers['content-disposition'].split('filename=')[1];// console.log('filename',fileName)fileName = fileName.replace(/"/g, '');downloadByData(response.data,fileName)} else {downloadByData(response.data,'xiazai.xlsx')} })} catch (e) {console.log(e);}}/*** 拿到文件流后的下载的方法* @param {*} data* @param {*} filename* @param {*} mime* @param {*} bom*/function downloadByData(data: BlobPart, filename: string, mime?: string, bom?: BlobPart) {const blobData = typeof bom !== 'undefined' ? [bom, data] : [data];const blob = new Blob(blobData, { type: mime || 'application/octet-stream' });if (typeof window.navigator.msSaveBlob !== 'undefined') {window.navigator.msSaveBlob(blob, filename);} else {const blobURL = window.URL.createObjectURL(blob);const tempLink = document.createElement('a');tempLink.style.display = 'none';tempLink.href = blobURL;tempLink.setAttribute('download', filename);if (typeof tempLink.download === 'undefined') {tempLink.setAttribute('target', '_blank');}document.body.appendChild(tempLink);tempLink.click();document.body.removeChild(tempLink);window.URL.revokeObjectURL(blobURL);}
}</script>
五、解释与实例说明
1、使用 Axios 请求文件流数据:
Axios 是一个基于 Promise 的 HTTP 客户端,可以用于浏览器和 Node.js。
在发送请求时,通过设置 responseType 为 ‘blob’ 来确保返回的数据是二进制流格式。
设置响应类型为 ‘blob’:
Blob 对象表示一个不可变的、原始数据的类文件对象,可以表示数据,比如二进制数据。
在请求中指定 responseType 为 ‘blob’,可以确保 Axios 将响应数据处理为 Blob 对象。
创建下载链接并触发下载:
Blob 对象可以通过 URL.createObjectURL 方法生成一个临时的 URL,用于表示该 Blob 对象。
创建一个 a 标签,并设置其 href 属性为生成的 URL,download 属性为文件名。
通过 JavaScript 触发点击事件来启动下载,然后移除 a 标签并释放生成的 URL。
下载文件,文件名获取不到
二进制流下载文件,从response header里面获取文件名,后端也设置了header【Content-Disposition】的值为【attachment;filename=MY_DOCUMENT_23.pdf】
network查看请求,response header的确是有值,但是axios获取header的值,永远只有content-type
这个请求是跨域请求
服务端加一个额外的响应头
【Access-Control-Expose-Headers】值为【Content-Disposition】
设置了这个响应头后,axios就可以获取到content-disposition响应头,也就能够拿到这个附件名字
相关文章:
vue实现文件流形式的导出下载
文章目录 Vue 项目中下载返回的文件流操作步骤一、使用 Axios 请求文件流数据二、设置响应类型为 ‘blob’三、创建下载链接并触发下载四、在 Vue 组件中集成下载功能五、解释与实例说明1、使用 Axios 请求文件流数据:设置响应类型为 blob:创建下载链接并…...
【DIY飞控板PX4移植】深入理解NuttX下PX4串口配置:ttyS设备编号与USARTUART对应关系解析
深入理解NuttX下PX4串口配置:ttyS设备编号与USART&UART对应关系解析 引言问题描述原因分析结论 引言 在嵌入式系统开发中,串口(USART/UART)的配置是一个常见但关键的任务。对于使用 NuttX 作为底层操作系统的飞控系统&#x…...
【报错解决】vsvars32.bat 不是内部或外部命令,也不是可运行的程序或批处理文件
报错信息: 背景问题:Boost提示 “cl” 不是内部或外部命令,也不是可运行的程序或批处理文件时, 按照这篇博客的方法【传送】添加了环境变量后,仍然报错: 报错原因: vsvars32.bat 的路径不正…...
CTFshow-文件上传(Web151-170)
CTFshow-文件上传(Web151-170) 参考了CTF show 文件上传篇(web151-170,看这一篇就够啦)-CSDN博客 Web151 要求png,然后上传带有一句话木马的a.png,burp抓包后改后缀为a.php,然后蚁剑连接,找fl…...
深度学习基础--将yolov5的backbone模块用于目标识别会出现怎么效果呢??
🍨 本文为🔗365天深度学习训练营 中的学习记录博客🍖 原作者:K同学啊 前言 yolov5网络结构比较复杂,上次我们简要介绍了yolov5网络模块,并且复现了C3模块,深度学习基础–yolov5网络结构简介&a…...
操作系统(16)I/O软件
前言 操作系统I/O软件是负责管理和控制计算机系统与外围设备(例如键盘、鼠标、打印机、存储设备等)之间交互的软件。 一、I/O软件的定义与功能 定义:I/O软件,也称为输入/输出软件,是计算机系统中用于管理和控制设备与主…...
leetcode437.路径总和III
标签:前缀和 问题:给定一个二叉树的根节点 root ,和一个整数 targetSum ,求该二叉树里节点值之和等于 targetSum 的 路径 的数目。路径 不需要从根节点开始,也不需要在叶子节点结束,但是路径方向必须是向下…...
WebGPU、WebGL 和 OpenGL/Vulkan对比分析
WebGPU、WebGL 和 OpenGL/Vulkan 都是用于图形渲染和计算的图形API,但它们的设计理念、功能和适用场景有所不同。以下是它们的总结和对比分析: 1. WebGPU WebGPU 是一个新的、现代化的图形和计算API,设计目的是为Web平台提供更接近硬件的性…...
不可重入锁与死锁
不可重入锁确实可能导致死锁,特别是在同一线程尝试多次获取同一把锁时。如果锁是不可重入的,那么线程在第二次尝试获取锁时会永远阻塞,从而导致死锁。 不可重入锁与死锁的关系 不可重入锁不允许同一个线程多次获取同一把锁。在以下情况下&am…...
XXE-Lab靶场漏洞复现
1.尝试登录 输入账号admin/密码admin进行登录,并未有页面进行跳转 2.尝试抓包分析请求包数据 我们可以发现页面中存在xml请求,我们就可以构造我们的xml请求语句来获取想要的数据 3.构造语句 <?xml version"1.0" ?> <!DOCTYPE fo…...
从Windows到Linux:跨平台数据库备份与还原
数据库的备份与还原 目录 引言备份 2.1 备份所有数据库2.2 备份单个数据库2.3 备份多个指定数据库 传输备份文件还原 4.1 还原所有数据库4.2 还原单个数据库4.3 还原多个指定数据库 注意事项拓展 1. 引言 在不同的操作系统间进行数据库迁移时,命令行工具是我们的…...
upload-labs
Win平台靶场 靶场2 教程 教程 教程 pass-01 bash 本pass在客户端使用js对不合法图片进行检查!前端绕过, 禁用前端js代码, 或者上传图片, 抓包改后缀为 php , 后端没有校验 bash POST /Pass-01/index.php HTTP/1.1 Host: 47.122.3.214:8889 Content-Length: 49…...
【西门子PLC.博途】——面向对象编程及输入输出映射FC块
当我们做面向对象编程的时候,需要用到输入输出的映射。这样建立的变量就能够被复用,从而最大化利用了我们建立的udt对象。 下面就来讲讲映射是什么。 从本质上来说,映射就是拿实际物理对象对应程序虚拟对象,假设程序对象是I0.0&…...
牛客周赛 Round 72 题解
本次牛客最后一个线段树之前我也没碰到过,等后续复习到线段树再把那个题当例题发出来 小红的01串(一) 思路:正常模拟,从前往后遍历一遍去统计即可 #include<bits/stdc.h> using namespace std; #define int lo…...
Flux Tools 结构简析
Flux Tools 结构简析 BFL 这次一共发布了 Canny、Depth、Redux、Fill 四个 Tools 模型系列,分别对应我们熟悉的 ControlNets、Image Variation(IP Adapter)和 Inpainting 三种图片条件控制方法。虽然实现功能是相同的,但是其具体…...
0 前言
ArCS作为一个基于Rust的CAD(计算机辅助设计)开源系统,尽管已经有四年未更新,但其设计理念和技术实现仍然具有很高的学习和参考价值。以下是对ArCS项目的进一步分析和解读: 一、项目亮点与技术优势 高效与安全的Rust语…...
ARM嵌入式学习--第八天(PWM)
PWM -PWM介绍 PWM(pulse Width Modulation)简称脉宽调制,是利用微处理器的数字输出来对模拟电路进行控制的一种非常有效的技术,广泛应用在测量,通信,工控等方面 PWM的频率 是指在1秒钟内,信号从…...
遇到“REMOTE HOST IDENTIFICATION HAS CHANGED!”(远程主机识别已更改)的警告
连接虚拟机时提示报错: [insocoperhq-soc-cap-raw3 ~]$ ssh root10.99.141.104WARNING: REMOTE HOST IDENTIFICATION HAS CHANGED! IT IS POSSIBLE THAT SOMEONE IS DOING SOMETHING NASTY! Someone could be eavesdropping on you right now (man-in-the-midd…...
vue3前端组件库的搭建与发布(一)
前言: 最近在做公司项目中,有这么一件事情,很是头疼,就是同一套代码,不同项目,要改相同bug,改好多遍,改的都想吐,于是就想做一个组件库,这样更新一下就全都可…...
COMSOL快捷键及内置函数
文章目录 COMSOL快捷键使用COMSOL算子求最大值和最小值COMSOL内置函数3.1 解析函数3.2 插值函数3.3 分段函数3.4 高斯脉冲函数3.5 斜坡函数3.6 矩形函数3.7 波形函数3.8 随机函数3.9 Matlab函数3.10 SWITCH函数 COMSOL快捷键 Ctrl+/ 可快速打开预定义的物理量列表。…...
【Java学习笔记】Arrays类
Arrays 类 1. 导入包:import java.util.Arrays 2. 常用方法一览表 方法描述Arrays.toString()返回数组的字符串形式Arrays.sort()排序(自然排序和定制排序)Arrays.binarySearch()通过二分搜索法进行查找(前提:数组是…...
在QWebEngineView上实现鼠标、触摸等事件捕获的解决方案
这个问题我看其他博主也写了,要么要会员、要么写的乱七八糟。这里我整理一下,把问题说清楚并且给出代码,拿去用就行,照着葫芦画瓢。 问题 在继承QWebEngineView后,重写mousePressEvent或event函数无法捕获鼠标按下事…...
基于 TAPD 进行项目管理
起因 自己写了个小工具,仓库用的Github。之前在用markdown进行需求管理,现在随着功能的增加,感觉有点难以管理了,所以用TAPD这个工具进行需求、Bug管理。 操作流程 注册 TAPD,需要提供一个企业名新建一个项目&#…...
接口自动化测试:HttpRunner基础
相关文档 HttpRunner V3.x中文文档 HttpRunner 用户指南 使用HttpRunner 3.x实现接口自动化测试 HttpRunner介绍 HttpRunner 是一个开源的 API 测试工具,支持 HTTP(S)/HTTP2/WebSocket/RPC 等网络协议,涵盖接口测试、性能测试、数字体验监测等测试类型…...
数据结构:递归的种类(Types of Recursion)
目录 尾递归(Tail Recursion) 什么是 Loop(循环)? 复杂度分析 头递归(Head Recursion) 树形递归(Tree Recursion) 线性递归(Linear Recursion)…...
Kubernetes 节点自动伸缩(Cluster Autoscaler)原理与实践
在 Kubernetes 集群中,如何在保障应用高可用的同时有效地管理资源,一直是运维人员和开发者关注的重点。随着微服务架构的普及,集群内各个服务的负载波动日趋明显,传统的手动扩缩容方式已无法满足实时性和弹性需求。 Cluster Auto…...
快速排序算法改进:随机快排-荷兰国旗划分详解
随机快速排序-荷兰国旗划分算法详解 一、基础知识回顾1.1 快速排序简介1.2 荷兰国旗问题 二、随机快排 - 荷兰国旗划分原理2.1 随机化枢轴选择2.2 荷兰国旗划分过程2.3 结合随机快排与荷兰国旗划分 三、代码实现3.1 Python实现3.2 Java实现3.3 C实现 四、性能分析4.1 时间复杂度…...
Vue3 PC端 UI组件库我更推荐Naive UI
一、Vue3生态现状与UI库选择的重要性 随着Vue3的稳定发布和Composition API的广泛采用,前端开发者面临着UI组件库的重新选择。一个好的UI库不仅能提升开发效率,还能确保项目的长期可维护性。本文将对比三大主流Vue3 UI库(Naive UI、Element …...
客户案例 | 短视频点播企业海外视频加速与成本优化:MediaPackage+Cloudfront 技术重构实践
01技术背景与业务挑战 某短视频点播企业深耕国内用户市场,但其后台应用系统部署于东南亚印尼 IDC 机房。 随着业务规模扩大,传统架构已较难满足当前企业发展的需求,企业面临着三重挑战: ① 业务:国内用户访问海外服…...
C++--string的模拟实现
一,引言 string的模拟实现是只对string对象中给的主要功能经行模拟实现,其目的是加强对string的底层了解,以便于在以后的学习或者工作中更加熟练的使用string。本文中的代码仅供参考并不唯一。 二,默认成员函数 string主要有三个成员变量,…...
