大佬教程收集整理的这篇文章主要介绍了jquery – 使用papa解析大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"); }
这可能是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文件所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。