如何在 AngularJS 中读取 csv 文件内容？

Posted 2023-02-22

【中文标题】如何在 AngularJS 中读取 csv 文件内容？

【英文标题】：How to read csv file content in AngularJS?

【发布时间】：2014-12-08 19:49:15

【问题描述】：

我想使用 AngularJS 和 html5 读取 csv 文件并获取其内容。我想把 csv 文件的内容放到 $scope 中。

我的 html 中有这段代码

 <table align="center" >
            <tr class="borderless">
                <td>Choose .csv file</td>
                <td><input type="file" name="readCsvFile" id="readCsvFile" accept=".csv"> </td>
                <td><input type="button" value="Upload" ng-click="uploadCsvFile()"></td>
            </tr>
 </table>

【参考方案1】：

使用自定义指令：

app.directive('fileReader', function() 
  return 
    scope: 
      fileReader:"="
    ,
    link: function(scope, element) 
      $(element).on('change', function(changeEvent) 
        var files = changeEvent.target.files;
        if (files.length) 
          var r = new FileReader();
          r.onload = function(e) 
              var contents = e.target.result;
              scope.$apply(function () 
                scope.fileReader = contents;
              );
          ;

          r.readAsText(files[0]);
        
      );
    
  ;
);

http://plnkr.co/edit/eeQbR65oE8iljm7ueGhX?p=preview

【讨论】：

附带说明，您可以使用r.readAsDataURL(files[0]);，以便稍后将该文件输出到

结果不包含换行符??，我怎么知道是否换行了??。否则效果很好

这可以适应以 JSON 格式读取 csv 文件吗？我不明白 FileReader 是如何做到这一点的

@OsamaSalama 当然可以：scope.fileReader = JSON.parse(contents)

嗨 MajoB，有没有机会在不使用指令的情况下做到这一点？