使用Data URI Scheme優(yōu)雅的實(shí)現(xiàn)前端導(dǎo)出csv

liujs 發(fā)布于2019-08-23 15:15 / 2550人閱讀

摘要：受限于請(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

云服務(wù)器 GPU云服務(wù)器 js導(dǎo)出數(shù)據(jù)csv php導(dǎo)出csv封裝 php導(dǎo)出csv文件 php頁(yè)面導(dǎo)出csv

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/101752.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

liujs

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

鴻蒙學(xué)習(xí)筆記之初識(shí)鴻蒙

閱讀 1260·2021-11-23 09:51
LeetCode 319 燈泡開(kāi)關(guān)[數(shù)學(xué)] HERODING的LeetCode之路

閱讀 1627·2021-11-16 11:45
你所不知道的同比和環(huán)比真正的區(qū)別

閱讀 4013·2021-10-09 09:43
優(yōu)刻得CDN流量包不限使用有效期，0.09元/G起，續(xù)費(fèi)同價(jià)！

閱讀 2681·2021-07-22 16:47
ThinkPHP2 Xml編譯出錯(cuò)，緩存生成失敗，請(qǐng)刷新頁(yè)面問(wèn)題

閱讀 944·2019-08-27 10:55
Koa中更方便簡(jiǎn)單發(fā)送響應(yīng)的方式

閱讀 3449·2019-08-26 17:40
服務(wù)器部署靜態(tài)資源（通過(guò)nginx反向代理）

閱讀 3083·2019-08-26 11:39
PNG,JPG,GIF，WEBP的區(qū)別

閱讀 3228·2019-08-23 18:39

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

使用Data URI Scheme優(yōu)雅的實(shí)現(xiàn)前端導(dǎo)出csv

相關(guān)文章

文件下載那點(diǎn)事

**javascript實(shí)現(xiàn)純前端將數(shù)據(jù)導(dǎo)出excel兩種方式**

關(guān)于個(gè)人開(kāi)源項(xiàng)目(vue app)的一些總結(jié)

關(guān)于個(gè)人開(kāi)源項(xiàng)目(vue app)的一些總結(jié)

發(fā)表評(píng)論

0條評(píng)論

liujs

男|高級(jí)講師

TA的文章

鴻蒙學(xué)習(xí)筆記之初識(shí)鴻蒙

LeetCode 319 燈泡開(kāi)關(guān)[數(shù)學(xué)] HERODING的LeetCode之路

你所不知道的同比和環(huán)比真正的區(qū)別

優(yōu)刻得CDN流量包不限使用有效期，0.09元/G起，續(xù)費(fèi)同價(jià)！

ThinkPHP2 Xml編譯出錯(cuò)，緩存生成失敗，請(qǐng)刷新頁(yè)面問(wèn)題

Koa中更方便簡(jiǎn)單發(fā)送響應(yīng)的方式

服務(wù)器部署靜態(tài)資源（通過(guò)nginx反向代理）

PNG,JPG,GIF，WEBP的區(qū)別

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

使用Data URI Scheme優(yōu)雅的實(shí)現(xiàn)前端導(dǎo)出csv

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！