下载大尺寸json时如何解决Uncaught RangeError
我正在尝试下载大型的json数据。 但它导致Uncaught RangeError: Invalid string length 。
请帮忙解决这个问题，提前致谢。
这里是Jsfiddle： http : //jsfiddle.net/sLq3F/456/
你可以使用fetch() ， Response.body.getReader() ，它返回一个ReadableStream ， TextDecoder() ， Blob() ， URL.createObjectURL() 。
请注意，在RAM有限或可用磁盘空间不足的设备上，在Save File对话框closures之后，点击Save at Save File对话框四分二十四秒，然后在另一个一分三十秒的1:30之后， .crdownload扩展名从文件pipe理器GUI的文件中删除。 在文件下载到文件系统的第一个4:20期间， Save File对话框是可见的，但鼠标指针是可移动的，尽pipeUI暂时没有响应点击或尝试改变标签。 当“ Save File对话框closures并且文件仍在下载到文件系统时，扩展名为.crdownload的用户界面将返回正常function。
在上述过程结束时，文件被成功地下载到总大小为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>
我想你会需要循环通过JSON文件中的东西，并将其分成更易于pipe理的string。
汤姆
你有一个例子片段的JSON文件？
你有一个运行在PHP的服务器？
如果你这样做，我相信你必须绝对检查你的PHP.ini文件或运行一个phpinfo页面，因为PHP设置确实限制了文件传输的大小，即使它不是一个外部请求。 它可以做到这一点在其他语言，但我从来没有这个问题，除了在PHP。
PS我没有看到文件的大小
我认为你的json文件是“超大JSON”场景之一。 你知道，如果JSON文件有这么多的logging（确切地说，基于testing，100000条logging使浏览器挂起，并且在许多浏览器中无法加载），不build议使用它。
你可以阅读这篇文章以获取更多信息： JSON对于BIG来说太大了吗？
