成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

liujs / 2559人閱讀

摘要：受限于請求需要后端分頁接口性能等原因不得不放棄的導出方式。所以我需要尋找一種可行的合理的優(yōu)雅的導出方案，那就是。方案實現(xiàn)方案介紹是利用標簽的和屬性來實現(xiàn)的。至此，這個問題算是完整的解決了。

問題描述

項目里需要實現(xiàn)一個導出csv的功能，這是個老生常談的需求，而且我們使用的是iview的組件庫，按道理說實現(xiàn)起來應該簡單，但實則不然，我在做的時候遇到了一些問題。受限于請求需要token、后端分頁、接口、性能等原因不得不放棄iview的導出方式。所以我需要尋找一種可行的、合理的、優(yōu)雅的導出方案，那就是Data URI Scheme。

方案實現(xiàn) 方案介紹

Data URI Scheme是利用HTML標簽的href和src屬性來實現(xiàn)的。他看起來像是這樣的:



或者


download


按照這種方案的介紹，我們把要導出的數(shù)據(jù)拼接在href指定位置就能實現(xiàn)導出的需求，代碼實現(xiàn)看起來像這樣:


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);


測試發(fā)現(xiàn)，妥妥的，沒毛病。

存在問題

在實踐中這個方案是有限制的、不安全的：在chrome的實現(xiàn)中Data URI Scheme允許的URL的最大限制為2MB(其他瀏覽器這里不做討論)。
一開始并不知道是超過2MB才會出問題，只是發(fā)現(xiàn)：
當在下載的文件比較大（超過2.7MB）的時候Chrome會報這樣的錯誤：


下載
失敗-網(wǎng)絡錯誤




后來google到這個限制是2MB，因為沒有官方文檔說明，感覺2MB的說法不是很確定，所以去扒了Chromium源碼，找到了相關代碼：


const size_t kMaxURLChars = 2 * 1024 * 1024;
...
if (!iter->ReadString(&s) || s.length() > url::kMaxURLChars) {
    *p = GURL();
    return false;
}



變量聲明部分源碼鏈接


變量引用部分源碼鏈接



2MB的限制算是實錘了，同時發(fā)現(xiàn)2010年就有人在Chromium論壇提出2MB太小了了，但是一直討論到2019年也沒有明顯的改善(只是改了圖片部分)。唉，chromium不改，我們能怎么辦呢？

方案改進

chromium不改，那我們只能自己想辦法了，于是有大牛提出來使用URL.createObjectURL + Blob來突破這個限制。
借助Blob對象和URL.createObjectURL我們可以得到一個很短的、而且?guī)缀跖c內(nèi)容長度無關的URL：


blob:https://xxx.com/0bde569d-20a2-4085-95e6-dcec242962c6


這樣就能突破Chrome對Data URI Scheme URL大小的限制了。
當然呢，我沒用過URL.createObjectURL這個方法，也沒用過Blob對象，所以我們要看看瀏覽的支持情況




恩，看起來沒有問題，那我們來看看代碼實現(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 () {
        // 通過createObjectURL創(chuàng)建的url需要通過revokeObjectURL()來釋放
        URL.revokeObjectURL(download_url);
        $("#export_csv").href = "";
    })
}
export_csv(csv_data_str);


如此，問題解決了，這樣就不怕超過2MB的CSV的導出了。


但是Chrome對Blob對象的大小有限制嗎？


Good question !


我在chromium Blob的說明文檔中找到一個表：





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






從這個表中，大概可以看出來在In-Memory Storage的時候桌面版64位Chrome Blob的上限為2GB(在Chrome 57上限是500MB)。所以現(xiàn)在看來這種方法應該是安全的。至此，這個問題算是完整的解決了。

iview的實現(xiàn)

另外，在我寫這篇文章的時候我發(fā)現(xiàn)iview的export-csv方法也是按照這個方案實施的，而且做了更多兼容，可以方便大家參考。但他在資源釋放的地方做的還需改進，也希望大家注意。

參考文檔


Data protocol URL size limitations


Excellent Export and the Chrome URL limit


Data_URI_scheme


excellentexport pull request


無法在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)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

                 
                   
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/101752.html

               

                      
               
              

              

                
相關文章

                
    
                             
                                                                                                    
  • 
                                                
    
                          
    文件下載那點事
    
                                                     
    摘要：不過這種方式有問題，目前查到的大部分過程都是會在服務器新建出一個文件，等下載完畢在做刪除，還沒有找到可以跨過這一步的方式。

showImg(https://segmentfault.com/img/remote/1460000018850368);
Content-Disposition / Content-Type
Content-Disposition
http 頭部的 Conte...
    
                                                   
                          
    
                                
    
                                    PascalXie
                                    
                                    評論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                            
                        
      
                                                
    
                          
    javascript實現(xiàn)純前端將數(shù)據(jù)導出excel兩種方式
    
                                                     
    javascript實現(xiàn)純前端將數(shù)據(jù)導出excel是有兩種方式，現(xiàn)在就為大家介紹：　　方法一　　將table標簽，包括tr、td等對json數(shù)據(jù)進行拼接，直接在table的表格上體現(xiàn)出，但此方法的弊端在于輸出的是偽excel，即使是生成xls為后綴的文件，可文件形式上還是html，　　代碼如下：　　<html>
　　<head>
　　<pstyle="f...
    
                                                   
                          
    
                                
    
                                    3403771864
                                    
                                    評論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    關于個人開源項目(vue app)的一些總結(jié)
    
                                                     
    摘要：關于個人開源項目的一些總結(jié)項目地址項目簡介此項目名叫。網(wǎng)站目前實現(xiàn)了登錄注冊日歷導入文件考勤導出缺勤名單等核心功能。這對于小型項目來說并沒有什么問題。編譯后的大小關于文件上傳與導出功能文件上傳導出可以說是此項目最關鍵的點了。

關于個人開源項目(vue app)的一些總結(jié)
項目地址
https://github.com/BYChoo/record
項目簡介
此項目名叫：Record。是以...
    
                                                   
                          
    
                                
    
                                    since1986
                                    
                                    評論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    關于個人開源項目(vue app)的一些總結(jié)
    
                                                     
    摘要：關于個人開源項目的一些總結(jié)項目地址項目簡介此項目名叫。網(wǎng)站目前實現(xiàn)了登錄注冊日歷導入文件考勤導出缺勤名單等核心功能。這對于小型項目來說并沒有什么問題。編譯后的大小關于文件上傳與導出功能文件上傳導出可以說是此項目最關鍵的點了。

關于個人開源項目(vue app)的一些總結(jié)
項目地址
https://github.com/BYChoo/record
項目簡介
此項目名叫：Record。是以...
    
                                                   
                          
    
                                
    
                                    高勝山
                                    
                                    評論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                           
                

              

              
               

                  
                  
發(fā)表評論

                   
               

              

                

                  
0條評論
   
                
 
                      

              

           

           

              
 
                

                   
              
  

                  
最新活動
 
           
                             
              





                                
              

           

        

      
 
    

    
     

      
    

    
    

    
       
       

         
閱讀需要支付1元查看
  
         
     
       

      
  
    
    














<