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

2023年7月21日 349次阅读 来源: 风吹过的夏夜

间隔上次博文更新已快一个月了，时期忙于各种事变没法脱身。本日难过空闲 and then 就来更新啦…
上篇中我们相识了下载React中怎样完成文件的上传，虽然不算什么嵬峨上的手艺但现实开辟的时刻会让本身越发的游刃有余。本日继承更新另一个相干的手艺 –> 文件的下载
看过上篇博文的朋侪应该有印象，做文件上传的功用能够用Form表单、fetch(Ajax或许Axios都行)和Form+fetch这三个要领。背景采纳express框架，由于fetch要求会涉及到跨域题目，所以背景还运用了Cors中间件来处置惩罚跨域的题目。这一点在上篇博文中都有说起所以在这里就不加赘述。
本篇所说的文件下载也是基于Form和fetch(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://segmentfault.com/a/1190000017099513
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞