下载大尺寸json时如何解决Uncaught RangeError

我正在尝试下载大型的json数据。 但它导致Uncaught RangeError: Invalid string length

在这里输入图像描述

请帮忙解决这个问题,提前致谢。

这里是Jsfiddle: http : //jsfiddle.net/sLq3F/456/

你可以使用fetch()Response.body.getReader() ,它返回一个ReadableStreamTextDecoder()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来说太大了吗?