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

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

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

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

Form

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

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

export default FormDownload;

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

Fetch

利用Fetch實現(xiàn)文件下載相比于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 (
            
        )
    }
}

export default FetchDownload;

麻煩在哪兒:

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

下面就一起來看看具體操作步驟:

用fetch訪問后臺接口并接受后臺返回值。因為fetch方法返回一個Promise對象，因此我們可以在then用獲取到它的返回值

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

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

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

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

接下來就是對a標(biāo)簽的一系列操作，然后模擬點擊事件觸發(fā)下載動作。

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

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

總結(jié)

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