[ 一起学React系列 -- 9 ] React中的文件下载

news/2024/2/29 2:07:20

距离上次博文更新已经快一个月了,期间忙于各种事情无法脱身。今天难得闲暇 and then 就来更新啦...
上篇中我们了解了下载React中如何实现文件的上传,虽然不算什么高大上的技术但实际开发的时候会让自己更加的游刃有余。今天继续更新另一个相关的技术 --> 文件的下载
看过上篇博文的朋友应该有印象,做文件上传的功能可以用Form表单fetch(Ajax或者Axios都行)和Form+fetch这三个方法。后台采用express框架,由于fetch请求会涉及到跨域问题,所以后台还使用了Cors中间件来解决跨域的问题。这一点在上篇博文中都有提及所以在这里就不加赘述。
本篇所说的文件下载也是基于Formfetch(Ajax或者Axios都行)。且听慢慢道来...

Form

Form表单可谓是前端界的万金油,什么数据提交、上传下载都样样精通,最关键的是:不需要考虑跨域
利用Form表单进行文件下载很简单,只需要几行代码就可以搞定:

class FormDownload extends Component {render() {return (<form method="get" action="http(s)://下载文件的后台接口"><button type="submit">Download!</button></form>)}
}export default FormDownload;

只要这一小段代码就可以实现文件的下载,是不是很开森?

Fetch

利用Fetch实现文件下载相比于Form那就显得很麻烦也很啰嗦,为什么呢?上代码先

class FetchDownload extends Component {download = () => {fetch('http(s)://下载文件的后台接口').then(res => res.blob().then(blob => {let a = document.createElement('a');let url = window.URL.createObjectURL(blob);let filename = res.headers.get('Content-Disposition');if (filename) {filename = filename.match(/\"(.*)\"/)[1]; //提取文件名a.href = url;a.download = filename; //给下载下来的文件起个名字a.click();window.URL.revokeObjectURL(url);a = null;}}));};render() {return (<input type="button" value="下载" onClick={this.download}/>)}
}export default FetchDownload;

麻烦在哪儿:

1、需要考虑跨域问题
2、需要对返回值进行转化
3、需要有DOM操作(生成a标签和销毁a标签)

下面就一起来看看具体操作步骤:

  1. 用fetch访问后台接口并接受后台返回值。因为fetch方法返回一个Promise对象,因此我们可以在then用获取到它的返回值
  2. 这一步就厉害了。fetch的返回值是一个有意思的对象,它包含了很多方法,其中一个方法就是blob()。这个方法可以将fetch的返回值转化成Blob对象。
  3. 利用document.createElement创建一个a标签
  4. 利用window.URL.createObjectURL将blob数据转成对应url
  5. 通过fetch的响应头获取到文件名res.headers.get('Content-Disposition')。这里需要mark下,因为我们后台使用了Cors中间件来解决跨域问题,因此需要做特别的设置来让Cors将响应头给暴露出来'exposedHeaders': '*',具体的大家可以看后台代码。
  6. 接下来就是对a标签的一系列操作,然后模拟点击事件触发下载动作。
  7. 最后需要将转化出来的url进行销毁window.URL.revokeObjectURL(url),a标签置为null

看完整个过程,除了了解到前面所说的麻烦,我们依然要看到其优点所在。对于Form实现的下载功能,我们只能做下载,而不能做额外的事情;但是使用fetch我们可以将获取到的数据做更多的处理,自由度相对较高。

总结

目前这方面的轮子特别多而且很是花里胡哨(但是用的特别爽,真香系列!),不过最基础的往往也就这么点技术。万丈高楼平地起,学好基础何怕不会造轮子。。。哈哈。另外再把demo贴一下,有兴趣的同学可以下载下来跑一下溜溜


https://www.jiucaihua.cn/news/show-3393371.html

相关文章

测试基础都忘没了吧,那还不点进来看!

1、软件概念 软件&#xff08;Software&#xff09;是一系列按照特定顺序组织的计算机数据和指令的集合。一般来讲&#xff0c;软件被划分为系统软件、应用软件和介于这两者之间的中间件。在国标中对软件的定义是与计算机系统操作有关的计算机程序、规程、规则以及可能有的文件…

测试开发面试真题 | 测试老兵进阶突破,成功挑战大厂 P7 Offer!

背景 本人是计算机软件专业出身&#xff0c;自 08 年本科毕业之后一直从事软件测试这一行&#xff0c;可以说是有 10 年经验的测试老兵了。最近的工作经历是在某知名互联网企业担任高级测试经理。或许会有人觉得奇怪&#xff0c;为何一个测试经理会有跳槽的想法&#xff0c;以…

shell 整理(40)====破解加密的qq号

http://blog.sina.com.cn/6699douding我的新浪博客&#xff0c;里面很多我写过的脚本题目&#xff1a; 看图写个shell小程序shell代码[rootlocalhost logs]# cat bb.sh #!/bin/bash>aaaecho 6 3 1 7 5 8 9 2 4 | xargs -n1 >ddfor i in seq 9docat dd | awk NR1{print $…

外包测试的职业发展利弊分析与建议

在 TesterHome 测试社区&#xff0c;经常能看到关于外包测试职业发展的热门贴&#xff0c;最常见的有两种&#xff1a; 一种是咨询是否可以去某某外包公司&#xff1f;与其他工作机会对比&#xff0c;该如何权衡利弊&#xff1f; 另一种则是外包测试中年危机贴&#xff0c;30…

为什么自动化测试框架中优先用 Pytest而不是 Robot Framework?

Python 自动化测试框架 的优缺点对比。 之前曾提问请教过 Pytest 和 Robot Framework 的优缺点对比&#xff0c;由于网上关于这方面的信息比较少&#xff0c;收到大家的反馈建议&#xff0c;十分感谢&#xff0c;现在是该总结一下了&#xff0c;欢迎大家一起交流探讨。 在对比…

29.22分钟学会书写正则(2)

写在前面的一些废话 没有看过上一篇文章的盆友有福了&#xff01; 今天&#xff01;没错&#xff01;就是现在&#xff01;我将免费&#xff01;all f*cking FREE&#xff01; 免费将上篇文章的链接发出来&#xff01; 这里是上篇 上回说了怎么写出正则&#xff0c;这次展示下…

数学之美

&#xfeff;&#xfeff;注&#xff1a;本文转载自博客园http://kb.cnblogs.com/page/193912/数学是美丽的&#xff0c;哪里有数哪里就有美。数学的定义是研究数量关系和空间形式的一门科学。但有句名言说&#xff1a;数学比科学大得多&#xff0c;因为它是科学的语言。数学不…

干货 | 原来升职加薪的测试工程师都擅长做接口测试

互联网行业已进入小步快跑快速迭代的趋势。一个新版本的上线&#xff0c;不仅需要移动端测试&#xff0c;更需要进行服务端的测试。服务端的测试可能比移动端的测试更重要。服务端比移动端更复杂交互更多也更考验技术了。 为什么受伤的总是黑盒测试&#xff1f; 接下来给大家看…

软件测试到底难在什么地方?

今天我们换个角度和大家聊一聊&#xff0c;软件测试到底难在哪里&#xff1f; 1、难在技术不行&#xff0c;你倒贴都没企业要。 题主说&#xff1a;软件测试无非就是写几个测试用例&#xff0c;再去执行&#xff0c;再把Bug汇总。 试问&#xff0c;测试真的就这么简单吗&#…

JS 横向图片跑马灯效果

2019独角兽企业重金招聘Python工程师标准>>> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns"http://www.w3.org/1999/xhtml"&…