下载大型json时如何解决Uncaught RangeError [英] How to solve Uncaught RangeError when download large size json
问题描述
但它会导致
未捕获的RangeError：无效的字符串长度。
请帮忙解决这个问题，谢谢。
这里是Jsfiddle ： http://jsfiddle.net/sLq3F/456/
您可以使用
fetch（）， Response.body.getReader（） 它返回一个 ReadableStream ， TextDecoder（）， Blob ）， URL.createObjectURL（）。 注意，在 RAM 或可用磁盘空间不足的设备上，点击保存后 at 保存文件对话框四分二十秒 4:20 在 Save File 对话框关闭，然后在之前再加上一分三十秒 1:30 。 crdownload 扩展名已从文件管理器GUI的文件中删除。在文件下载到文件系统并且 Save File 对话框可见的第一个 4:20 期间，鼠标指针是可移动的，但UI暂时无法响应点击或尝试更改标签。当保存文件对话框关闭并且文件仍在下载到文件系统时，扩展名为 .crdownload ，UI返回正常的功能。
在上述过程结束时，文件已成功下载到本地文件系统，其总大小为 189.8 MB（189,778,220字节）。
<！DOCTYPE html>
p> plnkr https://plnkr.co/edit/gewixzHZSKRXquZ2OVF2?p=preview
I am trying to download the large json data.
But it leads to Uncaught RangeError: Invalid string length.
Pls help to solve this problem,Thanks in advance.
Here is the Jsfiddle : http://jsfiddle.net/sLq3F/456/
解决方案 You can use fetch(), Response.body.getReader() which returns a ReadableStream, TextDecoder(), Blob(), URL.createObjectURL().
Note, at device having limited RAM or low available disk space, after clicking Save at Save File dialog four minutes and twenty seconds 4:20 elapsed before the Save File dialog closed, followed by an additional one minute and thirty seconds 1:30 before the .crdownload extension was removed from the file at file manager GUI. During the first 4:20 period where the file is downloading to filesystem and the Save File dialog is visible the mouse pointer is movable, though the UI is temporarily unresponsive to clicks or attempts to change tabs. When the Save File dialog closes and the the file is still downloading to filesystem, having extension .crdownload the UI returns to normal functionality.
At the conclusion of the process described above the file was successfully downloaded to local filesystem having a total size of 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
这篇关于下载大型json时如何解决Uncaught RangeError的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
