js 将文件 url 地址转成 Blob 文件流并下载

  1. 安装 axios(如果还没有安装):

    npm install axios
  2. 创建一个方法来处理文件下载

    在你的 Vue 组件中,可以创建一个方法来处理文件下载。假设你有一个 API 接口返回文件流,你可以使用 axios 来发送请求并处理响应。

<template><div><button @click="downloadFile">Download File</button></div>
</template><script>
import axios from 'axios';export default {methods: {async downloadFile() {try {// 假设你的接口是 /api/get-fileconst response = await axios.get('/api/get-file', {responseType: 'blob' // 确保响应类型为blob});const url = window.URL.createObjectURL(new Blob([response.data]));const link = document.createElement('a');link.href = url;link.setAttribute('download', 'file.pdf'); // 设置下载的文件名document.body.appendChild(link);link.click();document.body.removeChild(link);} catch (error) {console.error('Error downloading file:', error);}}}
};
</script>
  • axios.get('/api/get-file', { responseType: 'blob' }):发送一个GET请求到你的 API 接口,并将响应类型设置为 blob,以便接收二进制数据。
  • window.URL.createObjectURL(new Blob([response.data])):将响应数据转换为一个 Blob 对象,并生成一个临时的URL。
  • 创建一个隐藏的 <a> 标签,并将其 href 属性设置为生成的临时URL,同时设置 download 属性以指定下载的文件名。
  • 将这个 <a> 标签添加到文档中,然后模拟点击事件以触发下载。
  • 最后,移除这个临时创建的 <a> 标签。

这样,当用户点击按钮时,浏览器会开始下载指定的文件。 

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

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

相关文章

Django安装

在终端创建django项目 1.查看自己的python版本 输入对应自己本机python的版本&#xff0c;列如我的是3.11.8 先再全局安装django依赖包 2.在控制窗口输入安装命令&#xff1a; pip3.11 install django 看到Successflully 说明我们就安装成功了 python的Scripts文件用于存…

Qt字符编码

目前字符编码有以下几种&#xff1a; 1、UTF-8 UTF-8编码是Unicode字符集的一种编码方式(CEF)&#xff0c;其特点是使用变长字节数(即变长码元序列、变宽码元序列)来编码。一般是1到4个字节&#xff0c;当然&#xff0c;也可以更长。 2、UTF-16 UTF-16是Unicode字符编码五层次…

微服务设计模式 - 网关路由模式(Gateway Routing Pattern)

微服务设计模式 - 网关路由模式&#xff08;Gateway Routing Pattern&#xff09; 定义 网关路由模式&#xff08;Gateway Routing Pattern&#xff09;是微服务架构中一种非常重要的设计模式&#xff0c;主要用于在客户端和微服务之间提供一个中间层。这一模式通过中央网关路…

【Axure高保真原型】PDF阅读器

今天和大家分享PDF阅读器的原型模板&#xff0c;我们点击左侧的PDF&#xff0c;点击后右侧能看到这个PDF的内容&#xff0c;每个PDF都可以点击查看&#xff0c;如果PDF内容太多&#xff0c;我们也可以通过鼠标滚动来查看。这个模板是用中继器制作的&#xff0c;所以使用也很方便…

uniapp学习(010-2 实现抖音小程序上线)

零基础入门uniapp Vue3组合式API版本到咸虾米壁纸项目实战&#xff0c;开发打包微信小程序、抖音小程序、H5、安卓APP客户端等 总时长 23:40:00 共116P 此文章包含第113p的内容 文章目录 抖音小程序下载抖音开发者工具先去开发者工具里进行测试 抖音开放平台配置开始打包上传…

漏洞挖掘某电子商城类漏洞挖掘案例教程,手把手教你复现一个完整的漏洞挖掘全流程

前言 电子商城购物系统我们每天都能接触到&#xff0c;现在的商城系统&#xff0c;大多数已经在小程序、APP方向去开发了&#xff0c;因为灵活&#xff0c;方便管理且开发难度不高&#xff0c;当然&#xff0c;现在WEB系统还很多&#xff0c;我们本次会选几个SRC去浅挖一下那些…

C#入门013 表达式,语句详解 2

语句的定义 在计算机编程中&#xff0c;一条语句&#xff08;statement&#xff09;是命令式编程语言中表达某个要执行的动作的最小独立组成部分。用这种语言编写的程序是由一个或多个语句组成的序列构成的。语句可以包含内部组件&#xff0c;比如表达式&#xff08;expressio…

【运动的&足球】足球场景目标检测系统源码&数据集全套:改进yolo11-ASF-P2

改进yolo11-RetBlock等200全套创新点大全&#xff1a;足球场景目标检测系统源码&#xff06;数据集全套 1.图片效果展示 项目来源 人工智能促进会 2024.11.03 注意&#xff1a;由于项目一直在更新迭代&#xff0c;上面“1.图片效果展示”和“2.视频效果展示”展示的系统图片或…

数据结构之复杂度

hello everybody&#xff0c;好久不见&#xff0c;由于前些日子在学习文件操作&#xff0c;预处理相关知识&#xff0c;导致我好些天没写博客了&#xff0c;所以我先从数据结构开始写吧&#xff0c;等后面熟练些了再补回来&#xff0c;欧克&#xff0c;话不多说&#xff0c;进入…

使用Jest进行JavaScript单元测试

&#x1f493; 博客主页&#xff1a;瑕疵的CSDN主页 &#x1f4dd; Gitee主页&#xff1a;瑕疵的gitee主页 ⏩ 文章专栏&#xff1a;《热点资讯》 使用Jest进行JavaScript单元测试 引言 Jest 简介 安装 Jest 创建基本配置 编写测试用例 运行测试 快照测试 模拟函数 代码覆盖率…

Node.js 应用程序中的文件写入提升为 RCE

在这篇博文中,我们将强调代码安全基础的重要性。我们会展示一个技术案例:攻击者如何能够把 Node.js 应用中的文件写入漏洞转化为远程代码执行,即便目标系统的文件系统是以只读方式挂载的。这个技术通过利用暴露的管道文件描述符来获得代码执行能力,从而绕过了这类加固环境中的限…

Oracle视频基础1.4.5练习

1.4.5 看bbk的框架 ls env | grep ORA cd /u01/oradata ls ll cd bbk ll cd /u01/admin/ ll ll bbk cd cd db cd dbs ls vi initbbk.ora clear ls ll env | grep ORA执行创建数据库语句。 sqlplus /nolog conn /as sysdba create spfile from pfile ! ls ll exit startup nom…

Echats柱状图的横坐标用图片显示

<!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>图片作为横坐标示例 - ECharts</title><!-…

vscode php Launch built-in server and debug, PHP内置服务xdebug调试,自定义启动参数配置使用示例

在vscode中&#xff0c;当我们安装了插件 PHP Debug&#xff08;xdebug.php-debug&#xff09;或者 xdebug.php-pack 后 我们通过内置默认的 php xdebug配置启动php项目后&#xff0c;默认情况下我们在vscode中设置断点是不会生效的&#xff0c;因为我们的内置php服务默认启动时…

城镇保障性住房管理:SpringBoot系统创新点

5系统详细实现 5.1 用户信息管理 管理员可以对用户信息进行添加&#xff0c;修改&#xff0c;删除操作。具体界面的展示如图5.1所示。 图5.1 用户信息管理界面 5.2 房屋类型管理 管理员可以对房屋类型信息进行添加&#xff0c;修改&#xff0c;删除操作。具体界面如图5.2所示…

积极助力信创工作,爱加密荣获麒麟系统优秀合作伙伴

近日&#xff0c;麒麟软件安全生态联盟2024年第三次工作会议顺利举行。麒麟软件安全生态联盟由工业和信息化部网络安全产业发展中心指导成立&#xff0c;旨在联合打造原创性、引领性的自主操作系统内生安全技术体系和自主创新安全生态。会上&#xff0c;麒麟软件相关领导为爱加…

用图说明 CPU、MCU、MPU、SoC 的区别

CPU CPU 负责执行构成计算机程序的指令&#xff0c;执行这些指令所指定的算术、逻辑、控制和输入/输出&#xff08;I/O&#xff09;操作。 MCU (microcontroller unit) 不同的 MCU 架构如下&#xff0c;注意这里的 MPU 表示 memory protection unit MPU (microprocessor un…

navicat pg库安装mysql fdw 外表扩展

在Windows上手动安装mysql_fdw&#xff08;MySQL Foreign Data Wrapper&#xff09;通常涉及一系列步骤&#xff0c;包括下载源码、编译、配置和测试。以下是一个详细的指南&#xff1a; 一、下载mysql_fdw源码 访问mysql_fdw的GitHub发布页面&#xff0c;选择最新版本的源码…

LongVU :Meta AI 的解锁长视频理解模型,利用自适应时空压缩技术彻底改变视频理解方式

Meta AI在视频理解方面取得了令人瞩目的里程碑式成就&#xff0c;推出了LongVU&#xff0c;这是一种开创性的模型&#xff0c;能够理解以前对人工智能系统来说具有挑战性的长视频。 研究论文 "LongVU&#xff1a;用于长视频语言理解的时空自适应压缩 "提出了一种革命…

Oracle OCP认证考试考点详解082系列09

题记&#xff1a; 本系列主要讲解Oracle OCP认证考试考点&#xff08;题目&#xff09;&#xff0c;适用于19C/21C,跟着学OCP考试必过。 41. 第41题&#xff1a; 题目 41.Examine the description of the EMPLOYEES table NLS_DATE_FORMAT is set to DD-MON-YY Which query…