jQuery   发布时间:2022-03-30  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了jquery – 使用papa解析大csv文件大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在尝试加载一个大约有100k行的文件,到目前为止浏览器已经崩溃(本地).我在互联网上看到,看到Papa Parse似乎处理大文件.现在它减少到大约3-4分钟加载到textarea.一旦文件被加载,我就想做更多的jQuery来做计数和事情,所以这个过程需要一段时间.有没有办法让csv加载更快?我正确使用该程序吗?

<div id="tabs">
<ul>
  <li><a href="#tabs-4">Generate a Report</a></li>
</ul>
<div id="tabs-4">
  <h2>Generating a CSV report</h2>
  <h4>Input Data:</h4>      
  <input id="myFile" type="file" name="files" value="Load File" />
  <button onclick="loadFileastext()">Load SELEcted File</button>
  <form action="./" method="post">
  <textarea id="input3" style="height:150px;"></textarea>

  <input id="run3" type="button" value="Run" />
  <input id="runSplit" type="button" value="Run Split" />
  <input id="downloadLink" type="button" value="Download" />
  </form>
</div>
</div>

$(function () {
    $("#tabs").tabs();
});

var data = $('#input3').val();

function handleFileSELEct(evt) {
    var file = evt.target.files[0];

Papa.parse(file,{
    header: true,dynamicTyping: true,complete: function (results) {
        data = results;
    }
});
}

$(document).ready(function () {

    $('#myFile').change(function(handleFileSELEct){

    });
});


function loadFileastext() {
    var fileToLoad = document.getElementById("myFile").files[0];

    var fileReader = new FileReader();
    fileReader.onload = function (fileLoadedEvent) {
        var textFromFileLoaded = fileLoadedEvent.target.result;
        document.getElementById("input3").value = textFromFileLoaded;
    };
    fileReader.readAsText(fileToLoad,"UTF-8");
}

解决方法

你可能正确使用它,只是程序需要一些时间来解析所有100k行!

这可能是Web Workers一个很好的用例场景.

如果您以前从未使用它们,this site给出了一个不错的破坏,但关键部分是:

Browser coverage也相当不错,IE10及以下是唯一不支持它的半现代浏览器.

@H_178_5@mozilla有一个很好的视频,shows how web workers也可以加快@L_607_14@的帧速率.

我将尝试为您提供一个Web工作示例,但同时请注意,这不会加快脚本速度,它只是让它以异步方式处理,因此您的@L_607_14@保持响应.

编辑:

(注意:如果要在worker中解析CSV,您可能需要使用importScript函数(在工作线程中全局定义)在worker.js中导入Papa Parser脚本.有关详细信息,请参阅MDN page在那.)

这是我的工作示例:

csv.html

<!doctype html>
<html>
<head>
  <script type="text/javascript" src="https://cdnjs.cloudFlare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudFlare.com/ajax/libs/PapaParse/4.1.2/papaparse.js"></script>
</head>

<body>
  <input id="myFile" type="file" name="files" value="Load File" />
  <br>
  <button class="load-file">Load and Parse SELEcted CSV File</button>
  <div id="report"></div>

<script>
// initialize our parsed_csv to be used wherever we want
var parsed_csv;
var start_time,end_time;

// document.ready
$(function() {

  $('.load-file').on('click',function(E) {
    start_time = perfoRMANce.Now();
    $('#report').text('Processing...');

    console.log('initialize worker');

    var worker = new Worker('worker.js');
    worker.addEventListener('message',function(ev) {
      console.log('received raw CSV,Now parsing...');

      // Parse our CSV raw text
      Papa.parse(ev.data,{
        header: true,complete: function (results) {
            // Save result in a globally accessible var
          parsed_csv = results;
          console.log('parsed CSV!');
          console.log(parsed_csv);

          $('#report').text(parsed_csv.data.length + ' rows processed');
          end_time = perfoRMANce.Now();
          console.log('Took ' + (end_time - start_timE) + " milliseconds to load and process the CSV file.")
        }
      });

      // Terminate our worker
      worker.terminate();
    },falsE);

    // Submit our file to load
    var file_to_load = document.getElementById("myFile").files[0];

    console.log('call our worker');
    worker.postmessage({file: file_to_loaD});
  });

});
</script>
</body>

</html>

worker.js

self.addEventListener('message',function(E) {
    console.log('worker is running');

    var file = e.data.file;
    var reader = new FileReader();

    reader.onload = function (fileLoadedEvent) {
        console.log('file loaded,posTing BACk from worker');

        var textFromFileLoaded = fileLoadedEvent.target.result;

        // Post our text file BACk from the worker
        self.postmessage(textFromFileLoaded);
    };

    // Actually load the text file
    reader.readAsText(file,"UTF-8");
},falsE);

它处理的GIF,只需不到一秒钟(全部在本地运行)

jquery – 使用papa解析大csv文件

大佬总结

以上是大佬教程为你收集整理的jquery – 使用papa解析大csv文件全部内容,希望文章能够帮你解决jquery – 使用papa解析大csv文件所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。