前言

自己整理的一些项目中遇到过的关于上传和下载的一些Demo,大前端系列(也就是纯前端 + node端完成的下载,只要获取到数据下载工作全是前端来做),仅供给位看官参考,避免踩坑,即插即用,欢迎fork和star🌟,为这个仓库添砖加瓦~(P.S. 个人认为如果没写过上传下载其实还是挺麻烦的,这个基本能覆盖大部分场景了~)

纯前端下载

基于a标签location && iframeFileSaver --->[推荐]

node端下载

先下载到本地,再下载到浏览器直接流向浏览器下载[推荐]
frontend-download-sample,怕大家没有耐心看下去,这里放一个小的 Demo 图。
上传和下载个人认为在前端开发时稍微复杂一丢丢,需要额外处理一些事情而不是直接获取数据渲染页面,所以想着把平时遇到过的一些场景整理一下分享出来,大牛绕过,不喜勿喷~我平时在项目中接触的也就是一些上传图片,上传安装包,下载图片,下载安装包以及整理数据生成excel文件下载下来。暂时还没有接触过其他类型的,所以本项目可能有一定的局限性,只是给大家提供一种思路或者方案,有其他想法欢迎评论~

纯前端下载形式

顾名思义,纯前端实现,也就是不依赖于任何后端。不过这种方式有一定的局限性,比如下载类型,写法,数据形式等等。但是既然不依赖与后端,在可接受范围之内还是很推荐使用的,毕竟简单啊~

基于a标签下载

说到简单,那么最简单的就是这个了。那就是基于标签的下载文件方式,真的是超级简单。使用方法如下:href: 文件的绝对/相对地址 download: 文件名(可省略,省略后浏览器自动识别源文件名)下载jpg图片复制代码
那么既然这么简单,那肯定是存在问题的。
上面这张图片是官方提供的兼容性,目前只有 FireFox 和Chrome 支持 download 属性。至少这两个对于开发者来说不陌生,占有量也很大,所以也还可以吧,但是接下来我又尝试了一下这两个浏览器的兼容性情况。
上面这张,是FireFox 浏览器最新版,可以看到点击下载文件会弹出一个对话框,之后点击保存文件才可以进行下载,同时只能下载不能被浏览器打开的文件类型,如图片、文本文件、html文件这种可以被打开的文件,是无法被下载的直接在浏览器进行预览。
上面这张,是Chrome 最新版,与FireFox 相同,对于图片文件和文本文件这种可以被浏览器打开的文件不会被下载,而excel 和安装包这种文件是可以被直接下载的,无需进行任何二次确认操作。
那么能不能不让浏览器预览图片(或pdf或txt文件)?
肯定能啊~为什么呢?其实 a 标签的 href 属性还可以接受除了相对和绝对路径之外的其他形式 url,比如下面我们要用到的 DataUrl 和BlobUrl。只要使用这种形式,就可以让浏览器不预览而直接下载图片了,当然了操作起来更麻烦一些了就。