關(guān)于React的下載組件能找出一大堆，基本原理是通過(guò)HTML API的blob對(duì)象將文件存儲(chǔ)到本地。這個(gè)方法對(duì)小文件沒(méi)問(wèn)題，如果是大文件處理就比較麻煩。基于自己的實(shí)際需求就生出了這個(gè)以iframe為基礎(chǔ)的下載按鈕。
基本原理很簡(jiǎn)單，就是通過(guò)腳本自動(dòng)創(chuàng)建一個(gè) iframe，并實(shí)現(xiàn)下載。
那為什么是iframe呢？因?yàn)閕frame可以傳參數(shù)啊，這樣下載就可以擴(kuò)展出很多簡(jiǎn)單有用的玩法了。
在實(shí)際使用過(guò)程中還遇到一個(gè)小難點(diǎn)。
考慮這樣一個(gè)情況，前端提交的下載鏈接帶有參數(shù)（表單），但是參數(shù)超出了預(yù)設(shè)范圍，這時(shí)候需要給到前端頁(yè)面出錯(cuò)提示，那用什么方式合適？
- 直接使用 iframe 頁(yè)面輸出信息
- 使用 alert
- 使用回調(diào)，讓應(yīng)用程序內(nèi)部處理
1和2 方案都有明顯的缺點(diǎn)，就是無(wú)法和應(yīng)用有機(jī)的結(jié)合，結(jié)果都太突兀。3是最終選用的方案，錯(cuò)誤信息交給應(yīng)用去處理，有回調(diào)，更加易于將信息處理融合到應(yīng)用里去。
如何處理回調(diào)？我這里使用了 JSONP 方案，如果表單沒(méi)有出錯(cuò)，則頁(yè)面直接返回需要下載的文件或跳轉(zhuǎn)到需要下載的內(nèi)容；如果出錯(cuò)，則使用 JSONP 生成一個(gè)回調(diào)通知應(yīng)用處理出錯(cuò)信息。
JSONP 解決了數(shù)據(jù)反饋問(wèn)題，在實(shí)際使用中還有一個(gè)跨域問(wèn)題需要處理。剛開(kāi)始設(shè)計(jì)組件時(shí)沒(méi)有考慮跨域問(wèn)題，到實(shí)際項(xiàng)目中發(fā)現(xiàn)回調(diào)失效，調(diào)試后發(fā)現(xiàn)是跨域問(wèn)題。好在目前的HTML5已經(jīng)有完美的解決方案了，所以這個(gè)問(wèn)題也不是實(shí)質(zhì)性難點(diǎn)。
組件業(yè)務(wù)流程圖:
