摘要:受限于請(qǐng)求需要后端分頁(yè)接口性能等原因不得不放棄的導(dǎo)出方式。所以我需要尋找一種可行的合理的優(yōu)雅的導(dǎo)出方案,那就是。方案實(shí)現(xiàn)方案介紹是利用標(biāo)簽的和屬性來(lái)實(shí)現(xiàn)的。至此,這個(gè)問(wèn)題算是完整的解決了。
問(wèn)題描述
項(xiàng)目里需要實(shí)現(xiàn)一個(gè)導(dǎo)出csv的功能,這是個(gè)老生常談的需求,而且我們使用的是iview的組件庫(kù),按道理說(shuō)實(shí)現(xiàn)起來(lái)應(yīng)該簡(jiǎn)單,但實(shí)則不然,我在做的時(shí)候遇到了一些問(wèn)題。受限于請(qǐng)求需要token、后端分頁(yè)、接口、性能等原因不得不放棄iview的導(dǎo)出方式。所以我需要尋找一種可行的、合理的、優(yōu)雅的導(dǎo)出方案,那就是Data URI Scheme。
方案實(shí)現(xiàn) 方案介紹Data URI Scheme是利用HTML標(biāo)簽的href和src屬性來(lái)實(shí)現(xiàn)的。他看起來(lái)像是這樣的:
或者
download
按照這種方案的介紹,我們把要導(dǎo)出的數(shù)據(jù)拼接在href指定位置就能實(shí)現(xiàn)導(dǎo)出的需求,代碼實(shí)現(xiàn)看起來(lái)像這樣:
download
function export_csv (data) { $("#export_csv").href = "data:attachment/csv," + encodeURI(data); $("#export_csv").click(); setTimeout(function () { $("#export_csv").href = ""; }) } export_csv(csv_data_str);
測(cè)試發(fā)現(xiàn),妥妥的,沒(méi)毛病。
存在問(wèn)題在實(shí)踐中這個(gè)方案是有限制的、不安全的:在chrome的實(shí)現(xiàn)中Data URI Scheme允許的URL的最大限制為2MB(其他瀏覽器這里不做討論)。
一開(kāi)始并不知道是超過(guò)2MB才會(huì)出問(wèn)題,只是發(fā)現(xiàn):
當(dāng)在下載的文件比較大(超過(guò)2.7MB)的時(shí)候Chrome會(huì)報(bào)這樣的錯(cuò)誤:
下載 失敗-網(wǎng)絡(luò)錯(cuò)誤
后來(lái)google到這個(gè)限制是2MB,因?yàn)闆](méi)有官方文檔說(shuō)明,感覺(jué)2MB的說(shuō)法不是很確定,所以去扒了Chromium源碼,找到了相關(guān)代碼:
const size_t kMaxURLChars = 2 * 1024 * 1024; ... if (!iter->ReadString(&s) || s.length() > url::kMaxURLChars) { *p = GURL(); return false; }
變量聲明部分源碼鏈接
變量引用部分源碼鏈接
2MB的限制算是實(shí)錘了,同時(shí)發(fā)現(xiàn)2010年就有人在Chromium論壇提出2MB太小了了,但是一直討論到2019年也沒(méi)有明顯的改善(只是改了圖片部分)。唉,chromium不改,我們能怎么辦呢?
方案改進(jìn)chromium不改,那我們只能自己想辦法了,于是有大牛提出來(lái)使用URL.createObjectURL + Blob來(lái)突破這個(gè)限制。
借助Blob對(duì)象和URL.createObjectURL我們可以得到一個(gè)很短的、而且?guī)缀跖c內(nèi)容長(zhǎng)度無(wú)關(guān)的URL:
blob:https://xxx.com/0bde569d-20a2-4085-95e6-dcec242962c6
這樣就能突破Chrome對(duì)Data URI Scheme URL大小的限制了。
當(dāng)然呢,我沒(méi)用過(guò)URL.createObjectURL這個(gè)方法,也沒(méi)用過(guò)Blob對(duì)象,所以我們要看看瀏覽的支持情況
恩,看起來(lái)沒(méi)有問(wèn)題,那我們來(lái)看看代碼實(shí)現(xiàn)。
download
function export_csv (data) { const BOM = "uFEFF"; let blob_obj = new Blob([BOM + data], {type: "text/csv"}); let download_url = URL.createObjectURL(blob_obj); $("#export_csv").href = download_url; $("#export_csv").click(); setTimeout(function () { // 通過(guò)createObjectURL創(chuàng)建的url需要通過(guò)revokeObjectURL()來(lái)釋放 URL.revokeObjectURL(download_url); $("#export_csv").href = ""; }) } export_csv(csv_data_str);
如此,問(wèn)題解決了,這樣就不怕超過(guò)2MB的CSV的導(dǎo)出了。
但是Chrome對(duì)Blob對(duì)象的大小有限制嗎?
Good question !
我在chromium Blob的說(shuō)明文檔中找到一個(gè)表:
Device | Ram | In-Memory Limit | Disk | Disk Limit | Min Disk Availability |
---|---|---|---|---|---|
Cast | 512 MB | 102 MB | 0 | 0 | 0 |
Android Minimal | 512 MB | 5 MB | 8 GB | 491 MB | 10 MB |
Android Fat | 2 GB | 20 MB | 32 GB | 1.9 GB | 40 MB |
CrOS | 2 GB | 409 MB | 8 GB | 4 GB | 0.8 GB |
Desktop 32 | 3 GB | 614 MB | 500 GB | 50 GB | 1.2 GB |
Desktop 64 | 4 GB | 2 GB | 500 GB | 50 GB | 4 GB |
從這個(gè)表中,大概可以看出來(lái)在In-Memory Storage的時(shí)候桌面版64位Chrome Blob的上限為2GB(在Chrome 57上限是500MB)。所以現(xiàn)在看來(lái)這種方法應(yīng)該是安全的。至此,這個(gè)問(wèn)題算是完整的解決了。
iview的實(shí)現(xiàn)另外,在我寫這篇文章的時(shí)候我發(fā)現(xiàn)iview的export-csv方法也是按照這個(gè)方案實(shí)施的,而且做了更多兼容,可以方便大家參考。但他在資源釋放的地方做的還需改進(jìn),也希望大家注意。
參考文檔Data protocol URL size limitations
Excellent Export and the Chrome URL limit
Data_URI_scheme
excellentexport pull request
無(wú)法在nodejs中下載大文件
Issue 69227: Loading large URLs kills the renderer
Issue 375297: the total blobs" size cannot exceed about 500MiB
Is there any limitation on JavaScript Max Blob size
chromium/url/url_param_traits.cc#L36
chromium/url/url_constants.cc#L32
iview 3.x export-csv
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/101752.html
摘要:不過(guò)這種方式有問(wèn)題,目前查到的大部分過(guò)程都是會(huì)在服務(wù)器新建出一個(gè)文件,等下載完畢在做刪除,還沒(méi)有找到可以跨過(guò)這一步的方式。 showImg(https://segmentfault.com/img/remote/1460000018850368); Content-Disposition / Content-Type Content-Disposition http 頭部的 Conte...
javascript實(shí)現(xiàn)純前端將數(shù)據(jù)導(dǎo)出excel是有兩種方式,現(xiàn)在就為大家介紹: 方法一 將table標(biāo)簽,包括tr、td等對(duì)json數(shù)據(jù)進(jìn)行拼接,直接在table的表格上體現(xiàn)出,但此方法的弊端在于輸出的是偽excel,即使是生成xls為后綴的文件,可文件形式上還是html, 代碼如下: <html> <head> <pstyle="f...
摘要:關(guān)于個(gè)人開(kāi)源項(xiàng)目的一些總結(jié)項(xiàng)目地址項(xiàng)目簡(jiǎn)介此項(xiàng)目名叫。網(wǎng)站目前實(shí)現(xiàn)了登錄注冊(cè)日歷導(dǎo)入文件考勤導(dǎo)出缺勤名單等核心功能。這對(duì)于小型項(xiàng)目來(lái)說(shuō)并沒(méi)有什么問(wèn)題。編譯后的大小關(guān)于文件上傳與導(dǎo)出功能文件上傳導(dǎo)出可以說(shuō)是此項(xiàng)目最關(guān)鍵的點(diǎn)了。 關(guān)于個(gè)人開(kāi)源項(xiàng)目(vue app)的一些總結(jié) 項(xiàng)目地址 https://github.com/BYChoo/record 項(xiàng)目簡(jiǎn)介 此項(xiàng)目名叫:Record。是以...
摘要:關(guān)于個(gè)人開(kāi)源項(xiàng)目的一些總結(jié)項(xiàng)目地址項(xiàng)目簡(jiǎn)介此項(xiàng)目名叫。網(wǎng)站目前實(shí)現(xiàn)了登錄注冊(cè)日歷導(dǎo)入文件考勤導(dǎo)出缺勤名單等核心功能。這對(duì)于小型項(xiàng)目來(lái)說(shuō)并沒(méi)有什么問(wèn)題。編譯后的大小關(guān)于文件上傳與導(dǎo)出功能文件上傳導(dǎo)出可以說(shuō)是此項(xiàng)目最關(guān)鍵的點(diǎn)了。 關(guān)于個(gè)人開(kāi)源項(xiàng)目(vue app)的一些總結(jié) 項(xiàng)目地址 https://github.com/BYChoo/record 項(xiàng)目簡(jiǎn)介 此項(xiàng)目名叫:Record。是以...
閱讀 1260·2021-11-23 09:51
閱讀 1627·2021-11-16 11:45
閱讀 4013·2021-10-09 09:43
閱讀 2681·2021-07-22 16:47
閱讀 944·2019-08-27 10:55
閱讀 3449·2019-08-26 17:40
閱讀 3083·2019-08-26 11:39
閱讀 3228·2019-08-23 18:39