a标签打开文件(a标签 文件)

a标签打开文件(a标签 文件)前言 大家好 今天给大家带来前端小知识 前端利用 a 标签实现文件 图片 下载 也就是教大家利用 a 标签或者是 window open 来实现下载功能 文章目录 前言 常用方式 方法分析 代码实现 常用方式下载 a 标签访问文件地址 window open url 打开文件地址 后端提供一个接口 api download 通过接口返回文件流

大家好,我是讯享网,很高兴认识大家。



这是最通用的一种方式 不受跨域和请求方式的影响

在常规的 HTTP 应答中,该响应头的值表示对响应内容的展现形式

需求场景:

h5二维码

三、a标签+download属性

当url是同源(同域名、同协议、同端口号)时,这种情况用 a标签加download属性的方式即可,download属性指示浏览器该下载而不是打开该文件,同时该属性值即下载时的文件名;

注意:此方法会导致一个问题,当你下载图片的URL是远程图片url时,将不是下载该文件而是打开该文件


讯享网

错误示例代码–>(将远程url换成本地图片url即正确)

小程序码 下载二维码 1 2 结果:不是下载而是直接打开该url

四、通过接口跨域请求,动态创建a标签,以blob形式下载

当接口请求的跨域问题已经解决时(如Nginx方式),才可以直接通过请求的方式拿到文件流

1、fetch请求

将文件流转为blob格式,再通过a标签的download属性下载

res.blob() 该方法是Fetch API的response对象方法,该方法将后端返回的文件流转换为返回blob的Promise;blob(Binary Large Object)是一个二进制类型的对象,记录了原始数据信息

URL.createObjectURL(blob) 该方法的返回值可以理解为一个 指向传入参数对象的url 可以通过该url访问 参数传入的对象

模拟发送http请求,将文件链接转换成文件流,然后使用a标签download属性进行下载。

当你没解决跨域时使用此方法会有出现下方报错,所以此方法适用已经解决跨域问题的场景

小讯
上一篇 2025-04-28 11:54
下一篇 2025-04-30 12:50

相关推荐

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容,请联系我们,一经查实,本站将立刻删除。
如需转载请保留出处:https://51itzy.com/kjqy/137039.html