2020——一文带你层层解锁「文件下载」的奥秘

前言

一图览全文，可以先看看大纲适不适合自己，如果你喜欢则继续往下阅读。

这一节呢，主要介绍一些前置知识，对一些基础知识的介绍，如果你觉得你是这个。⬇️⬇️⬇️，你可以跳过前言。

前端的文件下载主要是通过 <a> ，再加上 download属性,有了它们让我们的下载变得简单。

download此属性指示浏览器下载 URL 而不是导航到它，因此将提示用户将其保存为本地文件。如果属性有一个值，那么此值将在下载保存过程中作为预填充的文件名（如果用户需要，仍然可以更改文件名）。此属性对允许的值没有限制，但是 / 和 \ 会被转换为下划线。大多数文件系统限制了文件名中的标点符号，故此，浏览器将相应地调整建议的文件名。( 摘自 https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/a)

注意:

此属性仅适用于同源 URL。

尽管 HTTP URL 需要位于同一源中，但是可以使用 blob: URL 和 data: URL ，以方便用户下载使用 JavaScript 生成的内容（例如使用在线绘图 Web 应用程序创建的照片）。

因此下载 url 主要有三种方式。(本文大部分以 blob 的方式进行演示)

兼容性

可以看到它的兼容性也非常的可观（https://www.caniuse.com/#search=download）

为了避免很多代码的重复性，因为我抽离出了几个公共函数。(该部分可跳过，名字都比较可读，之后若是遇到不明白则可以在这里寻找)

export function downloadDirect(url) {const aTag = document.createElement('a');aTag.download = url.split('/').pop();aTag.href = url;aTag.click()
}
export function downloadByContent(content, filename, type) {const aTag = document.createElement('a');aTag.download = filename;const blob = new Blob([content], { type });const blobUrl = URL.createObjectURL(blob);aTag.href = blobUrl;aTag.click();URL.revokeObjectURL(blob);
}
export function downloadByDataURL(content, filename, type) {const aTag = document.createElement('a');aTag.download = filename;const dataUrl = `data:${type};base64,${window.btoa(unescape(encodeURIComponent(content)))}`;aTag.href = dataUrl;aTag.click();
}
export function downloadByBlob(blob, filename) {const aTag = document.createElement('a');aTag.download = filename;const blobUrl = URL.createObjectURL(blob);aTag.href = blobUrl;aTag.click();URL.revokeObjectURL(blob);
}
export function base64ToBlob(base64, type) {const byteCharacters = atob(base64);const byteNumbers = new Array(byteCharacters.length);for (let i = 0; i < byteCharacters.length; i++) {byteNumbers[i] = byteCharacters.charCodeAt(i);}const buffer = Uint8Array.from(byteNumbers);const blob = new Blob([buffer], { type });return blob;
}

2020——一文带你层层解锁「文件下载」的奥秘相关推荐

【Web 技术】818- 一文带你层层解锁「文件下载」的奥秘
大家好我是秋风,今天带来的主题是关于文件下载,在我之前曾经发过一篇文件上传的文章(一文了解文件上传全过程(1.8w字深度解析,进阶必备),反响还不错,时隔多日,由于最近有研究一些媒体相关的工作,因此打 ...
一文带你层层解锁「文件下载」的奥秘
大家好我是秋风,今天带来的主题是关于文件下载,在我之前曾经发过一篇文件上传的文章(一文了解文件上传全过程(1.8w字深度解析,进阶必备 (opens new window)200+点赞),反响还不错, ...
stream模式不能接受blob文件_一文带你层层解锁文件下载的奥秘
今天带来的主题是关于文件下载,通过本文带你领略文件下载的奥秘.本文会花费你较长的时间阅读,建议先收藏/点赞,然后查看你感兴趣的部分,平时也可以充当当做字典的效果来查询. :) 不整不知道,一整,居然整 ...
偷特斯拉Autopilot代码？小鹏汽车前员工：「无意」带出，纯属「疏忽」
本文转载自新智元据美国地方法院4月15日的文件显示,特斯拉就其针对前雇员曹光植的诉讼已经达成和解. 随后,这位前特斯拉工程师.小鹏汽车前「感知负责人」曹光植的辩护律师也发表声明,特斯拉已同曹光植达 ...
跻身多链时代，一文读懂区块链「桥」及其设计权衡
撰文:Dmitriy Berenzon,1kxnetwork 研究合伙人编辑:南风经过多年的研究和发展,我们终于形成了一个多链的市场结构.目前有超过 100 条活跃的公共区块链,其中许多都有自己独 ...
十问十答,带你一起解锁「菊风VoLTE视频客服」
Q1:VoLTE是什么? VoLTE即Voice over LTE是一种IP数据传输技术,无需2G/3G网,全部业务承载于4G网络上的高清语音通话技术,可实现数据与语音业务在同一网络下的统一,也就是说 ...
Windows 10 自带输入法微软拼音「简体」「繁体」切换快捷键
快捷键:Ctrl + Shift + F 经常无缘无故的不知道点击了什么导致输入法变成繁体,关键是不太记事每次都要查询一番,还是记下来吧.
新钉钉，又对「协同」下了手
熟悉的办公套件,不一样的逻辑.我们来重新认识钉钉. 2021 年已经过去两周,送走一个惨淡年份的人们的兴奋劲已经渐渐冷却,发现送走了时间,而疫情这只黑天鹅却留了下来.一个直接结果是,人们过年可能不一定 ...
京东：网传通过 Bug 抢茅台是假消息；罗永浩回应带货价格非「全网最低」；Rust 文档团队解散 | 极客头条...
整理 | 屠敏头图 | CSDN 下载自东方 IC 「极客头条」-- 技术人员的新闻圈! CSDN 的读者朋友们早上好哇,「极客头条」来啦,快来看今天都有哪些值得我们技术人关注的重要新闻吧. 一分钟 ...

2020——一文带你层层解锁「文件下载」的奥秘

前言

2020——一文带你层层解锁「文件下载」的奥秘相关推荐

最新文章

热门文章