Hướng dẫn how to read csv file in javascript using filereader - cách đọc tệp csv trong javascript bằng trình đọc tệp

Tôi có một tệp CSV trong cùng thư mục với trang HTML và tôi muốn sử dụng Filereader để đọc nội dung tệp vào hàm jQuery-CSV để mảng, nhưng dường như tôi không thể hoạt động chính xác. Tôi nghĩ rằng tôi hiểu sự không đồng bộ của nhiệm vụ này, nhưng tôi đã mô tả nó một cách chính xác chưa? Ở đây, tôi đang cố gắng xuất ra ô thứ 2 trong cột thứ 2. Cảm ơn vì bất kì sự giúp đỡ.

<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['timeline']}]}"></script>

<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="jquery.csv-0.71.js"></script>
<script type="text/javascript">

var reader = new FileReader();

reader.onload = function(e) {
  var text = e.target.result;
  var data = $.csv.toArrays(text);
  document.write(data[1][1]);

}

reader.readAsText('data.csv');




</script>

Hướng dẫn how to read csv file in javascript using filereader - cách đọc tệp csv trong javascript bằng trình đọc tệp

Evan Plaice

Huy hiệu vàng 13,9k674 Huy hiệu bạc94 Huy hiệu đồng6 gold badges74 silver badges94 bronze badges

Khi được hỏi ngày 13 tháng 5 năm 2015 lúc 19:10May 13, 2015 at 19:10

1

Đây là bản demo hoạt động được cung cấp bởi JQuery-CSV

<html>
<head>
<meta charset="utf-8" />
<title>Demo - CSV-to-Table</title>
</head>

<body>
  <div id="inputs" class="clearfix">
    <input type="file" id="files" name="files[]" multiple />
  </div>
  <hr />
  <output id="list">
  </output>
  <hr />
  <table id="contents" style="width:100%; height:400px;" border>
  </table>

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
  <script src="http://evanplaice.github.io/jquery-csv/src/jquery.csv.min.js"></script>
  <script>
    $(document).ready(function() {
      if(isAPIAvailable()) {
        $('#files').bind('change', handleFileSelect);
      }
    });

    function isAPIAvailable() {
      // Check for the various File API support.
      if (window.File && window.FileReader && window.FileList && window.Blob) {
        // Great success! All the File APIs are supported.
        return true;
      } else {
        // source: File API availability - http://caniuse.com/#feat=fileapi
        // source: <output> availability - http://html5doctor.com/the-output-element/
        document.writeln('The HTML5 APIs used in this form are only available in the following browsers:<br />');
        // 6.0 File API & 13.0 <output>
        document.writeln(' - Google Chrome: 13.0 or later<br />');
        // 3.6 File API & 6.0 <output>
        document.writeln(' - Mozilla Firefox: 6.0 or later<br />');
        // 10.0 File API & 10.0 <output>
        document.writeln(' - Internet Explorer: Not supported (partial support expected in 10.0)<br />');
        // ? File API & 5.1 <output>
        document.writeln(' - Safari: Not supported<br />');
        // ? File API & 9.2 <output>
        document.writeln(' - Opera: Not supported');
        return false;
      }
    }

    function handleFileSelect(evt) {
      var files = evt.target.files; // FileList object
      var file = files[0];

      // read the file metadata
      var output = ''
          output += '<span style="font-weight:bold;">' + escape(file.name) + '</span><br />\n';
          output += ' - FileType: ' + (file.type || 'n/a') + '<br />\n';
          output += ' - FileSize: ' + file.size + ' bytes<br />\n';
          output += ' - LastModified: ' + (file.lastModifiedDate ? file.lastModifiedDate.toLocaleDateString() : 'n/a') + '<br />\n';

      // read the file contents
      printTable(file);

      // post the results
      $('#list').append(output);
    }

    function printTable(file) {
      var reader = new FileReader();
      reader.readAsText(file);
      reader.onload = function(event){
        var csv = event.target.result;
        var data = $.csv.toArrays(csv);
        var html = '';
        for(var row in data) {
          html += '<tr>\r\n';
          for(var item in data[row]) {
            html += '<td>' + data[row][item] + '</td>\r\n';
          }
          html += '</tr>\r\n';
        }
        $('#contents').html(html);
      };
      reader.onerror = function(){ alert('Unable to read ' + file.fileName); };
    }
  </script>
</body>
</html>

Tuyên bố miễn trừ trách nhiệm: Tôi là tác giả của JQuery-CSV

Đã trả lời ngày 21 tháng 1 năm 2016 lúc 11:54Jan 21, 2016 at 11:54

Evan Plaitevan PlaiceEvan Plaice

Huy hiệu vàng 13,9k674 Huy hiệu bạc94 Huy hiệu đồng6 gold badges74 silver badges94 bronze badges

5

Khi được hỏi ngày 13 tháng 5 năm 2015 lúc 19:10

document.getElementById('fileupload').addEventListener('change', function (e) {
  var files = e.target.files;
  //proceed your files here
  reader.readAsText(files[0]);
}, false);

Đây là bản demo hoạt động được cung cấp bởi JQuery-CSVMay 13, 2015 at 19:34

Tuyên bố miễn trừ trách nhiệm: Tôi là tác giả của JQuery-CSVAnton Savchenko

Đã trả lời ngày 21 tháng 1 năm 2016 lúc 11:541 gold badge7 silver badges11 bronze badges

0

Tôi có thể đọc tệp CSV trong JavaScript không?

Đọc tệp CSV với nút. Bạn cũng có thể đọc tệp một hàng tại một thời điểm bằng cách sử dụng các mô -đun fs.createleadstream () và readline. Giao diện Readline sẽ đọc từng dòng và kích hoạt sự kiện dòng. Khi đọc được thực hiện, Readline sẽ thực thi chức năng sự kiện gần gũi.You can also read the file a row at a time by using fs. createReadStream() and readline modules. The readline interface will read each line and trigger the line event. When the reading is done, readline will execute the close event function.

Việc sử dụng Filereader trong JavaScript là gì?

Đối tượng Filereader cho phép các ứng dụng web không đồng bộ đọc nội dung của các tệp (hoặc bộ đệm dữ liệu thô) được lưu trên máy tính của người dùng, sử dụng các đối tượng tệp hoặc blob để chỉ định tệp hoặc dữ liệu để đọc.lets web applications asynchronously read the contents of files (or raw data buffers) stored on the user's computer, using File or Blob objects to specify the file or data to read.

Làm cách nào để nhập tệp CSV vào bảng HTML?

Bảng CSV đến HTML..
Clone Kho lưu trữ này (trong dòng lệnh) Git Clone [email protected]: Derekeder/CSV-to-html-Table.Git CD CSV-to-HTML-Table ..
Thêm tệp CSV của bạn vào dữ liệu/ thư mục ..
Trong chỉ mục.HTML đặt các tùy chọn của bạn trong CSVTOHTMLTABLE.....
Chạy nó.....
Triển khai nó.....
iframe nó (tùy chọn).

Làm cách nào để đọc tệp CSV trong Node JS?

Bạn sẽ sử dụng phương thức CreateReadstream () của mô -đun FS để đọc dữ liệu từ tệp CSV và tạo luồng có thể đọc được.Sau đó, bạn sẽ gửi luồng vào một luồng khác được khởi tạo với mô-đun CSV-Parse để phân tích các khối dữ liệu.Khi các khối dữ liệu đã được phân tích cú pháp, bạn có thể ghi lại chúng vào bảng điều khiển.use the fs module's createReadStream() method to read the data from the CSV file and create a readable stream. You will then pipe the stream to another stream initialized with the csv-parse module to parse the chunks of data. Once the chunks of data have been parsed, you can log them in the console.