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

距离上次更新博文已经快一个月了，忙于各种事情，抽不出来。今天是难得的闲暇，以后再更新吧。。。在上一篇文章中，我们学习了如何在下载React中上传文件。虽然不是什么高深的技术，但是会让我们在实际开发中更加得心应手。今天继续更新另一个相关技术-->文件下载看过上一篇博文的朋友应该都有印象，文件上传的功能可以使用Form表单、fetch（Ajax或Axios）以及Form+fetch方式。后台使用了express框架。由于fetch请求涉及到跨域问题，后台也使用了Cors中间件来解决跨域问题。这一点在之前的博文中有提到，这里不再赘述。本文提到的文件下载也是基于Form和fetch（Ajax或Axios均可）。慢慢听...FormForm可谓是前端界的万灵药。精通各类数据提交、上传、下载。最重要的是：不需要考虑跨域。使用Form表单下载文件非常简单。只需要几行代码就搞定了：classFormDownloadextendsComponent{render(){return(type="submit">Download!)}}exportdefaultFormDownload;仅这一小段代码就可以实现文件的下载，是不是很开放？Fetch与Form相比，使用Fetch下载文件既麻烦又冗长。为什么？上面代码firstclassFetchDownloadextendsComponent{download=()=>{fetch('http(s)://下载文件的后台接口').then(res=>res.blob().then(blob=>{leta=document.createElement('a');leturl=window.URL.createObjectURL(blob);letfilename=res.headers.get('Content-Disposition');if(filename){filename=文件名。match(/\"(.*)\"/)[1];//提取文件名a.href=url;a.download=filename;//给下载的文件命名a.click();window.URL.revokeObjectURL(url);a=null;}}));};render(){return()}}exportdefaultFetchDownload;域问题2.需要对返回值进行转换3.需要有DOM操作（生成一个标签，销毁一个标签）下面看一下具体的操作步骤：使用fetch访问后台接口，接受后台返回值，因为fetch方法返回一个Promise对象，所以我们可以在then中获取它的返回值，这很棒。fetch的返回值是一个有趣的对象，它包含许多方法，其中之一是blob()。该方法可以将fetch的返回值转化为Blob对象。使用document.createElement创建标签，使用window.URL.createObjectURL将blob数据转换成对应的url。通过fetch的响应头获取文件名res.headers.get('Content-Disposition')。这里需要标记一下，因为我们后台使用了Cors中间件来解决跨域问题，所以需要特别设置一下让Cors暴露响应头'exposedHeaders':'*'，可以看后台代码了解详情。接下来就是对a标签的一系列操作，然后模拟点击事件触发下载动作。最后，转换后的url需要销毁window.URL.revokeObjectURL(url)，并将a标签设置为null看完整个过程，除了理解上面提到的麻烦之外，还要看看它的优点。对于Form实现的下载功能，我们只能做下载，不能做附加的事情；但是使用fetch，我们可以对获取到的数据做更多的处理，自由度比较高。总结一下，目前这方面的轮子很多，很花哨（但是用起来很爽，真香系列！），但最基础的往往就是这么一点点技术。几万丈高的楼都建在地上，学好基础何乐不造轮子。..哈哈。另外再贴出demo，有兴趣的同学可以下载运行一会