a标签打开文件（a标签 文件）



文章目录
前言
常用方式
方法分析
代码实现
常用方式
下载 a标签访问文件地址
window.open(‘url’) 打开文件地址
后端提供一个接口 /api/download 通过接口返回文件流
浏览器通过请求头Content-Type中的MIME类型（媒体类型，通常称为 Multipurpose Internet Mail Extensions 或 MIME 类型，如 ：image/jpeg application/pdf）识别数据类型，对相应的数据做出相应处理，对于图像文本等浏览器可以直接打开的文件，默认处理方式就是打开，为了避免浏览器直接打开文件我们需要做一些处理；详情看下方实现部分

方法分析
所有情况通用的方式： 后端设置下载请求的响应头 Content-Disposition: attachment; filename=“filename.jpg”
attachment 表示让浏览器强制下载
filename 用于设置下载弹出框里预填的文件名
非跨域情况下 给a标签加上 download 属性，如
download 里写文件名 注意后缀 (值非必填)
通过请求解决跨域问题 动态创建a标签通过blob形式下载,此部分在下方有体现
代码实现
一、后端设置下载请求的响应头 Content-Disposition 强制下载

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

Content-Disposition: attachment;
filename=“filename.jpg”
1
2
想使用window.open实现强制下载的可以用这种方式

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

inline 表示将响应内容作为页面的一部分进行展示
attachment 表示将响应内容作为附件下载，大多数浏览器会呈现一个“保存为”的对话框
filename(可选) 指定为保存框中预填的文件名
二、实现[HTMLCanvasElement]类型图片下载

需求场景:

注意:此方法只适用[HTMLCanvasElement]类型,[img]不可用此方法
当你需要将如[二维码]之类的图片下载时
实现代码

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访问 参数传入的对象

该方法需要注意的是，即便传入同一个对象作为参数，每次返回的url对象都是不同的
该url对象保存在内存中，只有在当前文档(document)被卸载时才会被清除，因此为了更好的性能，需要通过URL.revokeObjectURL(blobUrl) 主动释放
2、xhr请求

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

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

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/bcyy/49375.html