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

一尘不染

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

json

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

请帮助解决这个问题，谢谢。

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

阅读 234

2020-07-27

共1个答案

一尘不染

您可以使用fetch()，Response.body.getReader()它返回一个ReadableStream，TextDecoder()，Blob()，URL.createObjectURL()。

注意，在设备具有有限的RAM或较低的可用磁盘空间，点击后Save在Save File对话框4分钟二十秒4:20经过的前Save File对话关闭，随后是附加的一分钟，30秒1:30的前.crdownload延伸部，从在文件管理器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

2020-07-27