常见的下载方式

一. 使用 window.open()

  1. 使用场景
// 1. 先封装一个实习下载的函数
export const download = (path) => {window.open('下载的接口,例如:/fs/download?path' + path)
}
// 2. 使用:在需要下载的地方调用download函数,传入下载的url
download(path)
  1. 可能出现的问题
    • 页面闪烁
    • 如果是嵌入在别的模块中可能无法下载
  2. 解决办法:造成上述问题的原因都是window.open()默认打开一个新窗口
export const download = (path) => {window.location.href = '下载的接口,例如:/fs/download?path' + path //不闪屏
}

二. 使用 a 标签

  1. a标签download下载
 <!-- href是下载资源的相对路径 --><a href="./margin塌陷1.jpg" download target="_blank">点击我下载</a>

可以看到图片、markdown、word都可以正常下载
在这里插入图片描述

  1. a标签 + fetch实现下载
// 封装download函数
export const download = (href, method = 'GET', data = null, newName = '') => {let params = {method,header: {'Content-Type': 'application/json;charset=utf-8' },}if(method == 'post' || method == 'POST'){params['body'] = JSON.stringify(data)}fetch(href, params).then(res => {res.blob().then(blob => {let a = document.createElement('a')document.body.appendChild(a)let url = window.URL.createObjectURL(blob)a.href = urla.download = newName ? newName : (res.headers.get('filename') ? decodeURI(res.headers.get('filename')) : 'file')a.click()window.URL.revokeObjectURL(url)a.remove()this.$message.success('下载成功!')})}).catch(() => {this.$message.error('下载失败!')})
}// 引用下载
download('/fs/download?path=' + path, 'GET', null, filename)

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

AP5192 DC-DC降压恒流LED汽车头灯摩托车电动车大灯电源驱动

AP5192是一款PWM工作模式,高效率、外围简单、 内置功率MOS管&#xff0c;适用于4.5-100V输入的高精度 降压LED恒流驱动芯片。最大电流1.5A。 AP5192可实现线性调光和PWM调光&#xff0c;线性调光 脚有效电压范围0.55-2.6V. AP5192 工作频率可以通过RT 外部电阻编程 来设定&…

Zebec Protocol 与 PGP 深度合作,将流支付更广泛的应用于薪资支付领域

随着传统机构的入局&#xff0c;以及相关加密合规法规的落地&#xff0c;加密支付正在成为一种备受欢迎的全新支付方式。加密支付基于区块链底层&#xff0c;不受地域、时间等的限制&#xff0c;能够实时到账&#xff0c;具备去中心化、非许可等特性。 流支付是一种具备创新性的…

【Flutter】Flutter 使用 fluttertoast 实现显示 Toast 消息

【Flutter】Flutter 使用 fluttertoast 实现显示 Toast 消息 文章目录 一、前言二、安装和基础使用三、不同平台的支持情况四、如何自定义 Toast五、在实际业务中的应用六、完整的业务代码示例&#xff08;基于 Web 端&#xff09;七、总结 一、前言 在这篇文章中&#xff0c;…

异步迭代器

一、什么是异步迭代器&#xff1f; 实现了 __aiter__() 和 __anext__() 方法的对象。__anext__ 必须返回一个 awaitable对象。async for 会处理异步迭代器的 __anext__() 方法所返回的可等待对象&#xff0c;直到其引发一个 StopAsyncIteration 异常。 二、实例 class Async…

QT 相关设置

目录 1.安装QT2.安装好之后需要做一些设置2.1 基本的字体及主题设置2.2 格式化美化代码插件设置 1.安装QT 具体教程不写了 2.安装好之后需要做一些设置 2.1 基本的字体及主题设置 进入选项 选择喜欢的主题 字号字体设置 2.2 格式化美化代码插件设置 先下载一个格式化插…

适配器设计模式

目录 一、适配器模式1.类适配器模式2.对象适配器模式3.接口适配器 二、适配器模式应用场景三、适配器模式的优缺点 一、适配器模式 B站&#xff1a;java架构师 定义&#xff1a;适配器模式把一个类的接口变换成客户端所期待的另一种接口&#xff0c;从而使原本因接口不匹配而…

Mysql 事物与存储引擎

MySQL事务 MySQL 事务主要用于处理操作量大&#xff0c;复杂度高的数据。比如说&#xff0c;在人员管理系统中&#xff0c; 要删除一个人员&#xff0c;即需要删除人员的基本资料&#xff0c;又需要删除和该人员相关的信息&#xff0c;如信箱&#xff0c; 文章等等。这样&#…

黑马点评环境搭建导入

一开始配置maven的时候&#xff0c;发现怎么都无法查看maven的版本&#xff0c;后来才知道是JAVA_HOME的问题&#xff0c;开头多了一个空格&#xff08;因为我是直接复制过去的&#xff09;&#xff0c;然后搜网上通过命令行可以看到肉眼看不到的bug。 通过命令行的方式改正确后…

C++笔记之单例通过GetInstance传递参数

C笔记之单例通过GetInstance传递参数 code review! 文章目录 C笔记之单例通过GetInstance传递参数例1.普通指针的单例例2.结合智能指针和std::call_once例3.编译不通过的错误例子&#xff0c;在GetInstance内不可以使用std::make_shared来创建对象 例1.普通指针的单例 运行 …

会员管理系统实战开发教程06-会员充值

我们上篇讲解了会员开卡的操作&#xff0c;有了会员卡之后日常就是给会员进行充值&#xff0c;充值的逻辑是对余额进行累加&#xff0c;而且要记录充值的情况。 1 创建充值记录表 打开控制台&#xff0c;点击号创建数据源 输入数据源名称充值记录 点击编辑添加字段 先添加…

python的可哈希对象

一、介绍 在Python中&#xff0c;可哈希&#xff08;hashable&#xff09;是指一种对象类型&#xff0c;该类型的对象可以用作字典的键&#xff08;keys&#xff09;或集合&#xff08;sets&#xff09;的元素。可哈希的对象具有以下特点&#xff1a; 不可变性&#xff08;Imm…

【C++】SLT——Vector详解

本片要分享的是关于STL中Vector的内容&#xff0c;Vector的内容于string非常相似&#xff0c;只要会使用string那么学习Vector时会非常流畅。 目录 1.vector介绍 2.vector的简单实用 2.1.简单的无参构造 ​编辑2.2.简单带参构造 2.3.迭代器区间初始化 2.4.vector的遍历 …

爬虫逆向实战(二十六)--某某学堂登录

一、数据接口分析 主页地址&#xff1a;某某学堂 1、抓包 通过抓包可以发现数据接口是Account/LoginPost 2、判断是否有加密参数 请求参数是否加密&#xff1f; 通过查看“载荷”模块可以发现pass是加密参数 请求头是否加密&#xff1f; 无响应是否加密&#xff1f; 无co…

想要搞懂接口测试和功能测试有什么区别,那就必须知道他们的基本原理

本文主要分为两个部分&#xff1a; 第一部分&#xff1a;主要从问题出发&#xff0c;引入接口测试的相关内容并与前端测试进行简单对比&#xff0c;总结两者之前的区别与联系。但该部分只交代了怎么做和如何做&#xff1f;并没有解释为什么要做&#xff1f; 第二部分&#xf…

VBA技术资料MF48:VBA_在Excel中将列号与字母转换

【分享成果&#xff0c;随喜正能量】除非自己的认知获得了改变和刷新&#xff0c;否则&#xff0c;人们常说的“顺应自己的内心”&#xff0c;顺的不过是一颗旧心&#xff0c;一颗惯性的&#xff0c;充满了各种习性的套路之心。与“顺应自己的内心”恰恰相反&#xff0c;人要用…

java+ssm+mysql农场信息管理系统

项目介绍&#xff1a; 本系统为基于jspssmmysql的农场信息管理系统&#xff0c;功能如下&#xff1a; 用户&#xff1a;注册登录系统&#xff0c;菜地信息管理&#xff0c;农作物信息管理&#xff0c;种植信息管理&#xff0c;客户信息管理&#xff0c;商家信息管理&#xff…

java项目mysql转postgresql

特殊函数 &#xff1a; mysql&#xff1a; find_in_set(?, ancestors) postgresql&#xff1a; ? ANY (string_to_array(ancestors,,)) mysql&#xff1a; date_format(t1.oper_time, %Y-%m-%d) postgresql&#xff1a; rksj::date to_char(inDate,YYYY-MM-DD) mysql&am…

十六、pikachu之SSRF

文章目录 1、SSRF概述2、SSRF&#xff08;URL&#xff09;3、SSRF&#xff08;file_get_content&#xff09; 1、SSRF概述 SSRF(Server-Side Request Forgery&#xff1a;服务器端请求伪造)&#xff1a;其形成的原因大都是由于服务端提供了从其他服务器应用获取数据的功能&…

go:正确引入自己编写的包(如何在 Go 中正确引入自己编写的包)

前言 目录如下&#xff1a; 具体教程 1. 工作空间&#xff08;我的是根目录&#xff09;新建 go.work 文件 文件内容如下&#xff1a; go 1.21.0use (./tuchuang./tuchuang/testm ) 2. 添加go.mod文件 1. 包文件夹下 进入testm目录执行 go mod init testModule 2. 引用目…

文本匹配实战系列

引言 本系列文章开始介绍深度学习在文本匹配领域的应用&#xff0c;并且会尝试得到各种模型在给定的数据集上的表现。 深度文本匹配发展比较久&#xff0c;积累了很多文本匹配方法。也有很多的分类方式&#xff0c;一种分类方式是表示型和交互型。 表示型方法 表示型(repre…