如何解决下载大尺寸时未捕获的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