javascript - from - Cómo resolver RangeError no capturado cuando descargue json de gran tamaño
print json javascript (4)
Estoy tratando de descargar los datos grandes de JSON.
Pero conduce a
Uncaught RangeError: Invalid string length
.
Pls ayuda a resolver este problema, gracias de antemano.
Aquí está el Jsfiddle: http://jsfiddle.net/sLq3F/456/
¿Tienes un servidor corriendo en PHP?
si lo hace, creo que debe verificar absolutamente su archivo PHP.ini o ejecutar una página phpinfo porque la configuración de php limita el tamaño de la transferencia de archivos, incluso si no es una solicitud externa. Podría hacerlo en otros idiomas, pero nunca tuve este problema, excepto en PHP.
PD: no vi el tamaño del archivo
Creo que su archivo json es uno de los escenarios "DEMASIADO GRANDE PARA JSON". ya sabes, si el archivo json tiene tantos registros (para ser exactos, según una prueba, 100000 registros hacen que el navegador se cuelgue y más de lo que no se pudo cargar en muchos navegadores) no se recomienda usar.
puede leer este artículo para obtener más información: ¿CUÁN GRANDE ES DEMASIADO GRANDE PARA JSON?
Puede usar
fetch()
,
Response.body.getReader()
que devuelve un
ReadableStream
,
TextDecoder()
,
Blob()
,
URL.createObjectURL()
.
Tenga en cuenta que en el dispositivo con
RAM
limitada o poco espacio disponible en el disco, después de hacer
Save
en
Save
en el cuadro de diálogo
Save File
transcurrieron cuatro minutos y veinte segundos
4:20
antes de que se cerrara el cuadro de diálogo
Save File
, seguido de un minuto y treinta segundos adicionales
1:30
antes del
.crdownload
extensión
.crdownload
se eliminó del archivo en la GUI del administrador de archivos.
Durante el primer período de
4:20
en el que el archivo se descarga al sistema de archivos y el cuadro de diálogo
Save File
está visible, el puntero del mouse es móvil, aunque la interfaz de usuario no responde temporalmente a los clics o intenta cambiar las pestañas.
Cuando se cierra el cuadro de diálogo
Save File
y el archivo aún se está descargando al sistema de archivos, con la extensión
.crdownload
la interfaz de usuario vuelve a la funcionalidad normal.
Al concluir el proceso descrito anteriormente, el archivo se descargó con éxito al sistema de archivos local con un tamaño total de
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>
Supongo que tendrías que recorrer algo en el archivo JSON y dividirlo en cadenas más manejables.
Tom
¿Tiene un fragmento de ejemplo del archivo JSON?