[ 一起學(xué)React系列 -- 9 ] React中的文件下載

Jacendfeng 發(fā)布于2019-08-26 13:25 / 2226人閱讀

摘要：本篇所說(shuō)的文件下載也是基于和或者都行。的返回值是一個(gè)有意思的對(duì)象，它包含了很多方法，其中一個(gè)方法就是。通過(guò)的響應(yīng)頭獲取到文件名。接下來(lái)就是對(duì)標(biāo)簽的一系列操作，然后模擬點(diǎn)擊事件觸發(fā)下載動(dòng)作。

距離上次博文更新已經(jīng)快一個(gè)月了，期間忙于各種事情無(wú)法脫身。今天難得閑暇 and then 就來(lái)更新啦...
上篇中我們了解了下載React中如何實(shí)現(xiàn)文件的上傳，雖然不算什么高大上的技術(shù)但實(shí)際開(kāi)發(fā)的時(shí)候會(huì)讓自己更加的游刃有余。今天繼續(xù)更新另一個(gè)相關(guān)的技術(shù) --> 文件的下載
看過(guò)上篇博文的朋友應(yīng)該有印象，做文件上傳的功能可以用Form表單、fetch(Ajax或者Axios都行)和Form+fetch這三個(gè)方法。后臺(tái)采用express框架，由于fetch請(qǐng)求會(huì)涉及到跨域問(wèn)題，所以后臺(tái)還使用了Cors中間件來(lái)解決跨域的問(wèn)題。這一點(diǎn)在上篇博文中都有提及所以在這里就不加贅述。
本篇所說(shuō)的文件下載也是基于Form和fetch(Ajax或者Axios都行)。且聽(tīng)慢慢道來(lái)...

Form

Form表單可謂是前端界的萬(wàn)金油，什么數(shù)據(jù)提交、上傳下載都樣樣精通，最關(guān)鍵的是:不需要考慮跨域。
利用Form表單進(jìn)行文件下載很簡(jiǎn)單，只需要幾行代碼就可以搞定:

class FormDownload extends Component {
    render() {
        return (
            
                
            
        )
    }
}

export default FormDownload;

只要這一小段代碼就可以實(shí)現(xiàn)文件的下載，是不是很開(kāi)森？

Fetch

利用Fetch實(shí)現(xiàn)文件下載相比于Form那就顯得很麻煩也很啰嗦，為什么呢？上代碼先

class FetchDownload extends Component {
    download = () => {
        fetch("http(s)://下載文件的后臺(tái)接口").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; //給下載下來(lái)的文件起個(gè)名字
                a.click();
                window.URL.revokeObjectURL(url);
                a = null;
            }
        }));
    };

    render() {
        return (
            
        )
    }
}

export default FetchDownload;

麻煩在哪兒:

1、需要考慮跨域問(wèn)題
2、需要對(duì)返回值進(jìn)行轉(zhuǎn)化
3、需要有DOM操作(生成a標(biāo)簽和銷毀a標(biāo)簽)

下面就一起來(lái)看看具體操作步驟:

用fetch訪問(wèn)后臺(tái)接口并接受后臺(tái)返回值。因?yàn)閒etch方法返回一個(gè)Promise對(duì)象，因此我們可以在then用獲取到它的返回值

這一步就厲害了。fetch的返回值是一個(gè)有意思的對(duì)象，它包含了很多方法，其中一個(gè)方法就是blob()。這個(gè)方法可以將fetch的返回值轉(zhuǎn)化成Blob對(duì)象。

利用document.createElement創(chuàng)建一個(gè)a標(biāo)簽

利用window.URL.createObjectURL將blob數(shù)據(jù)轉(zhuǎn)成對(duì)應(yīng)url。

通過(guò)fetch的響應(yīng)頭獲取到文件名res.headers.get("Content-Disposition")。這里需要mark下，因?yàn)槲覀兒笈_(tái)使用了Cors中間件來(lái)解決跨域問(wèn)題，因此需要做特別的設(shè)置來(lái)讓Cors將響應(yīng)頭給暴露出來(lái)"exposedHeaders": "*"，具體的大家可以看后臺(tái)代碼。

接下來(lái)就是對(duì)a標(biāo)簽的一系列操作，然后模擬點(diǎn)擊事件觸發(fā)下載動(dòng)作。

最后需要將轉(zhuǎn)化出來(lái)的url進(jìn)行銷毀window.URL.revokeObjectURL(url)，a標(biāo)簽置為null

看完整個(gè)過(guò)程，除了了解到前面所說(shuō)的麻煩，我們依然要看到其優(yōu)點(diǎn)所在。對(duì)于Form實(shí)現(xiàn)的下載功能，我們只能做下載，而不能做額外的事情；但是使用fetch我們可以將獲取到的數(shù)據(jù)做更多的處理，自由度相對(duì)較高。

總結(jié)

目前這方面的輪子特別多而且很是花里胡哨(但是用的特別爽，真香系列！)，不過(guò)最基礎(chǔ)的往往也就這么點(diǎn)技術(shù)。萬(wàn)丈高樓平地起，學(xué)好基礎(chǔ)何怕不會(huì)造輪子。。。哈哈。另外再把demo貼一下，有興趣的同學(xué)可以下載下來(lái)跑一下溜溜