前端文件下载通识篇

前言

前端如何实现下载文件呢?随着前端技术的发展,越来越多的前端需求中会出现下载文件这样的需求。

看着掘金很多人在近期不断的分享有关的文章,我总结了下自己的经验,根据不同情况,总结了一篇算是前端文件下载的通识篇,如果你对这方面完全不懂或者没有任何方案,那么本文会给你一个很不错的启示。

方案一 :原生提交,后端返回文件流

这种方式是利用form.submit直接向后端提交,后端返回文件流生成的文件,后端处理成功后会直接返回到页面,浏览器会整理并打开自己的保存下载文件机制 。

优点 :没有兼容问题,传统方式

缺点:拿不到后端处理这个过程的时机,无法根据回调函数做交互以及进度提示

// 后端参考代码
return File(stream, "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", HttpUtility.UrlEncode("咨询记录导出.xls", Encoding.GetEncoding("UTF-8")));
// 参考代码
function exportRecord() {
   var $form = $("<form>"); //定义一个form表单
    $form.hide().attr({target:'',method:'post','action':'/xxx'});
    var $input = $("<input>");
    $input.attr({"type":"hidden","name":'req'}).val(req);
    $form.append($input).appendTo($("body")).submit().remove();
 }

方案 二 :ajax提交,后端返回在线文件地址

利用ajax或者新生的axios去提交请求,后端会返回一个线上的文件地址,前端可以通过原生的window.open打开这个地址就可以实现下载;也可以通过a标签设置href以及download属性,并自动点击实现其下载功能,关于其兼容性问题,可以判断download属性是否存在来弥补。

优点 :可以拿到其返回时机,可以做交互

缺点 :线上会存储大量的中间临时文件,可以用设置时限来优化。另外涉及用户隐私的问题,可以用token等验证机制实现。

// 参考方案
$.ajax({
                type: "post",
                url: "/xxx",
                data: data,
                success: function (res) {
                    tool.loadingend();
                    if(res.Status){
                    // window.open或者a标签下载 
                    var isSupportDownload = 'download' in document.createElement('a');
                    if(isSupportDownload){
                    var $a = $("<a>") ;
                    $a.attr({href:res.url,download:'filename'}).hide().appendTo($("body"))[0].click();
                    }else{
                       window.open(res.url)
                    }
                    }else{
                      tool.tip(res.Message);
                    }
                }
            })
  • a标签download属性
  • 方案二 :补充方案 :利用form表单提交下载文件(ajax无法直接处理返回的文件类型),用于解决window.open方案被浏览器拦截的情况。
let $form = $("<form>") ;
$form.attr({method:"get",action:res.Message}).hide();
let queryStr = res.Message.split("?")[1];
let queryObj = qs.parse(queryStr) ;
$("body").append($form);
for(let p in queryObj){
    let $input =$("<input type='hidden'>") ;
    $input.attr({"name":p,value:queryObj[p]}).appendTo($form);
}
$form.submit().remove(); 

方案三 :ajax提交,后端返回二进制流

后续优化完成方案。

方案四 :前端利用download模块进行下载

支持场景 : 与上面的方案相比,这个模块提供的方案更加完善,而不是局限于某种方案,使用率很高。在源码中,我们可以看到在这个模块中针对各个浏览器和相应的属性是否支持进行了比较全面的兼容。其对应的下载文件方案包括了以下几种。 – window.open(url)打开某个文件地址 – iframe的框架中,设置src属性,通过iframe进行文件的下载,支持文件地址 – 通过form标签,设置action的文件地址,然后通过form的提交来完成文件的下载(支持二进制)

方案小结: 对于常规的支持文件地址的下载,兼容性非常好,而对于传统的文件流性质的,通过form标签也可以进行简单的支持,可以说是非常好的方案了。当然如果你需要那么全面的方案,大多数情况用其中一个就可以了。

方案五 :h5新生方案下载

这个我觉得张鑫旭大佬介绍的蛮多的,应该上手足够了,就不多介绍了。除了a标签提供的download属性,多介绍了一种html:blob的方式。另外针对图片可以通过base64的方式。

传送门:h5新方式下载文件

个人建议:虽然新技术很好,但酌情使用,而且这里没有考虑任何兼容,也没有谈论到其他的一些文件类型,比如表格,pdf,大文件,视频音频的下载情况等。所以不是很建议把这个当做很常规的方案来考虑。

方案六 :file-saver

模块地址:https://npm.taobao.org/package/file-saver,推荐使用,下载量以及稳定性足够好。支持新出的h5特性的加载方式,也就是方案五的部分。 github托管地址:https://github.com/eligrey/FileSaver.js

在模块的介绍中:详细说明了浏览器支持的情况,以及可以支持的下载范围,保存为的文件类型,与其我们去用基础知识踩雷,还是建议大家用成熟的模块方案去解决需求相关的问题。支持不了就退步用传统的方案解决,让后端提供直接的文件地址,要知道后端有更多的成熟的技术架包,对于前端来说还是萌新不确定的方案,后端早已经有了答案。

说明:我们之前的需求是希望下载一个表格文件,之前的方案是用后端生成文件地址,然后进行下载,其设置的返回response content type 为application/vnd.ms-excel (常规类型application/json)。后面发现有这个模块,基本使用还是体验蛮好的,此时的约定变成了后端根据查询的数据生成一个二进制的文件流,这样的好处是如果么有必要的时候可以减少在阿里云或者其他服务器暂存很多文件。

拓展思考下:在大家的公司里有没有遇到过类似的需求,按照我之前的经验是本来是想后端返回一个生成之后的文件地址,但后端的回复是由于采用了负载均衡,这个地址再去请求时不一定会请求到这个服务器,所以之前的前后端协调方案是放到了阿里云,然后通过设置权限和时效来保证文件的临时性,用户也可以在相似请求时不用重复请求数据库,重新生成文件,因为重复的数据内容会直接返回已经上传到阿里云的文件地址。

源码解析: 在其源码中,主要是针对返回的http的resonsetype做了要求,然后针对返回的地址进行处理,其中涉及到重要的代码:

//利用a标签下载
var a = document.createElement('a')
a.href = blob
//触发点击事件
node.dispatchEvent(new MouseEvent('click'))
// reader 进行解析
var reader = new FileReader()
var url = reader.result
//得到可解析的地址
_global.URL || _global.webkitURL,
URL.createObjectURL(blob)
//对 cors 跨域是否支持
  return xhr.status >= 200 && xhr.status <= 299

filereader的官方介绍:https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader

总结

综上,无论是偏传统的方案,还是比较全面兼容的根据文件地址下载的方式,还是h5新出的webapi的方式都有比较好的认识,如果你对相关的知识点或者方案有进一步研究的兴趣,建议针对官方api的相关文章或者已经开源出的两个模块进行深度的优化和研究效率更佳。

觉得还不错,给个赞加关注吧,谢谢大家的支持。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏北京马哥教育

Linux的10个最危险的命令

豌豆贴心提醒,本文阅读时间10分钟 Linux命令行佷有用、很高效,也很有趣,但有时候也很危险,尤其是在你不确定你自己在正在做什么时候。 这篇文章将会向你...

4827
来自专栏24K纯开源

使用VS2010开发Qt程序的一点经验

导读      相比于Qt Creator,我更喜欢用VS2010来进行开发。虽然启动时间相对较慢,但是VS下强大的快捷键和丰富的插件,以及使用多年的经验,都让...

2758
来自专栏Ryan Miao

session机制详解以及session的相关应用

session是web开发里一个重要的概念,在大多数web应用里session都是被当做现成的东西,拿来就直接用,但是一些复杂的web应用里能拿来用的sessi...

4357
来自专栏腾讯云数据库(TencentDB)

CynosDB的计算层设计优化揭秘——兼容PostgreSQL版

CynosDB 是腾讯数据库研发团队推出的自研数据库,有PostgreSQL和MySQL两个版本。本文以兼容PostgreSQL版CynosDB为例,介绍我们的...

15.2K4
来自专栏一名叫大蕉的程序员

合格的配置中心应有的素养No.76

最近在看配置中心的一些设计,好像基本都是五花八门,主要看的是还是携程的 Apollo 这个开源的配置中心项目。一直以来都觉得配置中心很重要,因为这对于灰度发布,...

1858
来自专栏Python中文社区

如何构建一个分布式爬虫(理论篇)

專 欄 ❈resolvewang,Python中文社区专栏作者 Python和Go爱好者。具有较为丰富的爬虫和反爬虫经验,对web编程略知一二,对基础架构比较感...

5077
来自专栏WeTest质量开放平台团队的专栏

Linker加载so失败问题分析

原文链接:https://wetest.qq.com/lab/view/421.html

1401
来自专栏Java架构沉思录

高并发环境下服务器该如何优化

以下内容为入门级介绍,意在对老技术作较全的总结而不是较深的研究。主要参考《构建高性能Web站点》一书。

3993
来自专栏漏斗社区

安全运维中基线检查的自动化之ansible工具巧用

前几周斗哥分享了基线检查获取数据的脚本,但是在面对上百台的服务器,每台服务器上都跑一遍脚本那工作量可想而知,而且都是重复性的操作,于是斗哥思考能不能找到一种方法...

2463
来自专栏LanceToBigData

JavaWeb(二)会话管理之细说cookie与session

前言   前面花了几篇博客介绍了Servlet,讲的非常的详细。这一篇给大家介绍一下cookie和session。 一、会话概述 1.1、什么是会话?   会话...

2627

扫码关注云+社区

领取腾讯云代金券