vue3项目 前端文件下载的两种工具函数

article/2025/8/20 14:49:05

1、Blob 流下载

Blob 表示不可变的原始数据的类文件对象,通常用于处理文件或大块二进制数据。

注意:js中还有一个二进制数据类型ArrayBuffer,它们的区别如下

  • Blob 可以位于磁盘、高速缓存内存和其他不可用的位置;ArrayBuffer 是存在内存中的,可以直接操作

  • Blob 对象是不可变的;而 ArrayBuffer 是可以通过 TypedArrays 或 DataView 来操作

  • 二者可以通过方法互相转换

  • Blob包含数据和 MIME 类型(标准化文件类型标识系统,用于描述文档、文件或字节流的性质和格式)信息;ArrayBuffer 不包含任何元数据(如文件类型),更接近计算机底层的二进制表示

具体见博文:Js:Blob、ArrayBuffer、FileReader、URL、Image、关于文件下载的方法案例-CSDN博客

/*** 下载Blob流文件方法* @param data* @param filename*/
export function downloadBlobFile(data, filename) {const fileName = filename + moment(new Date()).format('YYYYMMDD')const blob = new Blob([data], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8'})const objectUrl = URL.createObjectURL(blob)const a = document.createElement('a')a.style.display = 'none'a.href = objectUrla.setAttribute('download', fileName)document.body.appendChild(a)a.click()a.remove()URL.revokeObjectURL(objectUrl) // 释放内存
}

适用场景:

  • 后端返回二进制流(如 axios 请求设置 responseType: 'blob'

  • 需要前端生成文件并下载

  • 需要自定义文件名和文件类型

  • 处理动态生成的内容(如导出的Excel

使用示例:

 2、根据url下载文件

/***根据url下载文件*/
export function downloadFileByURL(url: string) {let endUrl = url// 不同模块不同路径if (url.includes('/api/web/csp')) {endUrl = import.meta.env.VITE_APP_API_PATH_RESOURCE + url} else {endUrl = import.meta.env.VITE_APP_API_PATH_USER + url}const a = document.createElement('a')a.setAttribute('target', '_self')a.style.display = 'none'a.href = endUrldocument.body.appendChild(a)a.click()a.remove()
}

 适用场景:

  • 下载服务器静态文件(如图片、PDF)

  • 文件已存在于服务器指定路径

  • 不需要前端处理文件内容

使用示例:


http://www.hkcw.cn/article/lsqCNhcmSi.shtml

相关文章

信号量的应用:利用信号量实现进程同步

进程同步与信号量 进程同步是指在多进程环境下,为了保证程序的正确性,协调多个进程按一定顺序执行。信号量是实现进程同步的重要工具,它本质上是一个特殊变量,通过对其进行 wait(P 操作)和 signal&#xf…

常规个人信息安全设置(windwos一)

windows操作系统 1、修改个人电脑密码,修改为安全密码,打开安全策略。2、确定关闭远程访问功能3、打开病毒防护 最近无意识的一些操作导致了电脑被病毒攻击,表现就是所有文件夹下都会自动生成一个READMIN.TXT文件,内容如下&#x…

C#回调函数深度解析

文章目录 前言什么是回调函数C#中实现回调的方式委托(Delegate)事件(Event)Action和FuncPredicateAsyncCallback匿名方法和Lambda表达式 回调函数实际应用场景异步编程事件处理策略模式LINQ查询 回调函数的优缺点优点缺点 最佳实践与注意事项总结相关资源 前言 在现代软件开发…

一男子发多条视频怀念亡妻:相恋12年,会照顾好两个老人

5月29日(报道),山东一男子发布多条视频怀念亡妻,二人相恋十二年,28岁妻子死于心脏停搏,去世前一天还晒了老公送的花。当事人:“我会带着思念好好活下去,照顾好两个老人。”责任编辑:zx0002

在supermap idesktop中两块影像设置背景透明后,拼接处会有一条明显的黑线,但是放大后又没有,这个怎么处理

1.将数据集的影像数据先添加到一个新的地图; 2.去数据集将影像数据的金字塔删除; 3.重新创建影像金字塔;选择【创建影像数据金字塔】 4.将栅格数据添加到图层里 点击属性进行设置,勾选【无值透明】、背景值设置为0 0 0&#xff…

女子误扔40多万黄金到第二天才发觉 民警经过近1小时排查成功找到

近日在天津,民警接到市民求助,称不慎将价值40万元的黄金当作垃圾丢弃。报警人是天津一家经营金店的夫妇,店主称,当晚闭店后,他的妻子照例去扔垃圾,却不慎将装有500多克价值40万元的黄金首饰及金料的塑料袋当作垃圾丢弃。等他们发现时已是第二天,此时垃圾早已被环卫部门收…

工业智能网关在柔性制造系统中的动态产线切换实践

一、项目背景 在电子制造行业,某企业拥有数百台生产设备,包括西门子品牌的PLC设备、欧姆龙品牌的传感器以及基恩士品牌的条码读取器等。这些设备分布在多个车间,传统的监控方式需要工作人员到现场逐一查看设备运行状态,不仅效率低…

Facebook 的隐私保护为何备受争议?

Facebook,这个全球最大的社交网络平台,拥有数十亿用户,其隐私保护问题一直是公众关注的焦点。从数据收集到隐私政策的复杂性,再到第三方数据共享和隐私设置的不直观性,Facebook 在隐私保护方面面临着重重挑战。本文将深…

lesson04-简单回归案例实战(理论+代码)

理解线性回归及梯度下降优化 引言 在机器学习的基础课程中,我们经常遇到的一个重要概念就是线性回归。今天,我们将深入探讨这一主题,并通过具体的例子来了解如何利用梯度下降方法对模型进行优化。 线性回归简介 线性回归是一种统计方法&a…

孙颖莎被邱贻可踩脚当场告状 师徒情深趣事多

孙颖莎被邱贻可踩脚当场告状 师徒情深趣事多!昨天,央视体育发布了《体坛零距离》预告片,其中展示了孙颖莎和她的教练邱贻可在巴黎奥运会女单决赛失利后的艰难心路历程。邱贻可提到那时看到乒乓球都会感到不适。在谈到未来是否继续追梦时,孙颖莎坚定表示:“必须的!感谢邱指…

女子称按摩时遭医生猥亵 警方调查

长沙的刘女士因为腰部不舒服,前几天,她找到了位于雨花区城南路附近的高飞林中医诊所进行正骨按摩,可是,接下来发生的事情让她情绪差点崩溃。“5月20号的时候,我去长沙高飞林诊所,因为我的腰椎盘突出,去进行正骨检查,但是医生以腰椎盘突出压迫神经为由,他需要对我进行盆…

leetcode hot100刷题日记——27.对称二叉树

方法一:递归法 class Solution { public:bool check(TreeNode *left,TreeNode *right){//左子树和右子树的节点同时是空的是对称的if(leftnullptr&&rightnullptr){return true;}if(leftnullptr||rightnullptr){return false;}//检查左右子树的值相不相等&a…

接口自动化测试(六)

一、pytest参数化 pytest: pytest.mark.parametrize(argnames,argvalues) 参数化DDT:把对应的数据去进行提取出来进行统一维护 ---- 多组数据pytest.mark.parametrize(argnames,argvalues) pytest.mark.parametrize("参数名",参数数据) 参数数据格式&…

LangChain【1】之认识框架和简单体验

文章目录 参考文章LangChain框架概述LangChain分层结构LangChain环境配置简单案例体验方式1:Api key单独文件配置方法2:直接设置Api KeyLangSmith的添加和使用 参考文章 通过类比, 十分钟快速掌握LangChain的架构LangChain入门教程,基本案例…

ESP8266-12S配置信息保存到文件SPIFFS示例

一、前言 利用SPIFFS保存参数(加载,读取,修改) vscodePlatformIO 二、代码片段 头文件引用 定义结构体 读取、保存、修改配置文件 初始化setup(),利用配置文件中的账号密码连接WIFI 循环体loop(),读取串口…

90后作家刘楚昕获奖后追忆病故女友 未竟的承诺

近日,90后作家刘楚昕的小说《泥潭》荣获第二届漓江文学奖虚构类奖。颁奖现场上,作家余华公布了这个好消息。而获奖者刘楚昕的感言因格外催泪动人在朋友圈里刷了屏。2017年,刘楚昕在武汉大学读博期间遇到了他的初恋女友。当时,他正朝着自己的文学梦马不停蹄地赶路。“每次我…

WPS 免登录解锁编辑

遇到 WPS 需要登录才能启用编辑功能? 如何免登录使用编辑功能? 方法一 解锁方法 1、关闭 WPS; 2、桌面右键→ “新建”→“文本文档”,粘贴以下内容(见最下面);编码保持默认(ANSI …

破局传统采购!采购文件编制审核系统为烟草行业数智化加速

在烟草行业错综复杂的商业生态系统中,采购环节扮演着至关重要的战略枢纽角色。它如同驱动精密机械运转的核心齿轮,其每一次高效的“啮合”都深刻影响着整条价值链的协同运作。卓越的采购效能不仅是提升企业整体运营效率的基石,更是实现精细化…

65常用控件_QListWidget的使用

目录 代码示例:使用ListWidget List Widget 使⽤ QListWidget 能够显⽰⼀个纵向的列表. 形如: 每个选项都可以被选中. 列表中的每个元素/每一项就称为是一个Item 更具体的说,通过QListWidgetItem类表示的~~ 核⼼属性 属性说明currentRow当前被选中的是第几行cou…

c++数据结构8——二叉树的性质

一、二叉树的基本性质 示图1: 性质1:层节点数上限 在一棵二叉树中,第i层至多有2^{i-1}个节点(首层是第1层) 这个性质可以通过数学归纳法证明: 第1层:2^{1-1}2^01个节点(根节点&am…