如何解決下載大尺寸時未捕獲的RangeError json

我正在嘗試下載大型json數據。但它導致Uncaught RangeError: Invalid string length。如何解決下載大尺寸時未捕獲的RangeError json

請幫助解決這個問題，在此先感謝。

這裏是的jsfiddle：http://jsfiddle.net/sLq3F/456/

來源

2016-10-10 selvarajmas

你試圖獲取一個** 181兆字節的文件**。（請注意閱讀這個問題的人：如果你點擊那個小提琴鏈接，準備好讓你的CPU風扇旋轉起來。） – Pointy

是的，在那裏兩次串起大量數據。該數據對象中的數組有206560個項目。 –

因爲這裏沒有問題，所以沒有得到足夠的關注。有錯誤消息和鏈接。 –

您可以使用fetch()，Response.body.getReader()返回一個ReadableStream，TextDecoder()，Blob()，URL.createObjectURL()。

注意，在裝置中的.crdownload擴展之前具有有限RAM或低可用磁盤空間，點擊Save在Save File對話框4分鐘二十秒4:20的Save File對話關閉之前過去之後，隨後是附加的一分鐘，30秒1:30已從文件管理器GUI的文件中刪除。在文件下載到文件系統的第一個4:20期間，可以看到Save File對話框，但鼠標指針是可移動的，儘管UI暫時無法響應點擊或嘗試更改制表符。當Save File對話框關閉並且文件仍在下載到文件系統時，如果擴展名爲.crdownload，UI將返回正常功能。

在上述過程結束時，文件被成功下載到總大小爲189.8 MB (189,778,220 bytes)的本地文件系統。

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <style> 
 
    code { 
 
     color:navy; 
 
     background-color:#eee; 
 
     padding:2px; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <button>Request File</button><br> 
 
    <progress min="0" max="189778220" value="0"></progress> 
 
    <output></output> 
 
    <br><br> 
 
    <label></label> 
 
    <script> 
 
    var url = "https://raw.githubusercontent.com/zemirco/sf-city-lots-json/master/citylots.json"; 
 
    var button = document.querySelector("button"); 
 
    var progress = document.querySelector("progress"); 
 
    var label = document.querySelector("label"); 
 
    var output = document.querySelector("output"); 
 
    
 
    var request = (url) => { 
 
     
 
     label.innerHTML = `Requesting <code>${url}</code> at ${new Date()}.<br><br>`; 
 
     
 
     return fetch(url) 
 
     .then(response => response.body.getReader()) 
 
     .then(reader => { 
 
     var decoder = new TextDecoder(); 
 
     var json = ""; 
 
     label.innerHTML += `Request successful.<br><br>Reading request body at ${new Date()}.<br><br>`; 
 
     return reader.read().then(function processData(result) { 
 
      if (result.done) { 
 
       // do stuff when `reader` is `closed` 
 
       return reader.closed.then(function() { 
 
       // return `json` string 
 
       return json; 
 
       }); 
 
      }; 
 
      json += decoder.decode(result.value); 
 
      output.innerHTML = ` ${json.length} of ${progress.max} bytes read`; 
 
      progress.value = json.length; 
 
      return reader.read().then(processData) 
 
      }) 
 
      .then(function(data) { 
 
      var message = `Reading of <code>${url}</code> complete at ${new Date()}. <br><br>` 
 
           + `${data.length} total bytes read. ` 
 
           + `Please allow up to 4 minutes for file to download ` 
 
           + `to filesystem after clicking <code>Save</code>.<br><br>`; 
 
      label.innerHTML += message; 
 
      
 
      var blob = new Blob([data], { 
 
       type: "application/json" 
 
      }); 
 
      var file = URL.createObjectURL(blob); 
 
      var a = document.createElement("a"); 
 
      a.download = "citylots.json"; 
 
      a.href = file; 
 
      document.body.appendChild(a); 
 
      a.click(); 
 
      var closeBlob = (e) => { 
 
       window.removeEventListener("focus", closeBlob); 
 
       blob.close(); 
 
       URL.revokeObjectURL(file); 
 
      }; 
 
      window.addEventListener("focus", closeBlob); 
 
      return message.replace(/<[^>]*>/g, ""); 
 
      }) 
 
      .catch(function(err) { 
 
      console.log("err", err) 
 
      }) 
 
     }); 
 
    } 
 
    
 
    var handleRequest = (e) => { 
 
     button.setAttribute("disabled", "disabled"); 
 
     request(url).then(function(message) { 
 
     console.log(message); 
 
     button.removeAttribute("disabled"); 
 
     }) 
 
    }; 
 
    
 
    button.addEventListener("click", handleRequest); 
 
    </script> 
 
</body> 
 
</html>

plnkr https://plnkr.co/edit/gewixzHZSKRXquZ2OVF2?p=preview

來源

2016-10-13 09:45:34 guest271314

當我點擊button.it似乎加載，但花了一些時間後，導致DevTools從該頁面斷開。請幫助我，.. – selvarajmas

@selvarajmas點擊「保存」後花了4分鐘用於保存文件對話框關閉。在文件寫入本地文件系統完成之前又過了一分半鐘。您試過的設備有多少「RAM」？ – guest271314

我已安裝內存（RAM）3GB – selvarajmas