如何使用AngularJS上传和下载CSV文件

最新推荐文章于 2022-12-27 09:41:20 发布

cunjie3951

最新推荐文章于 2022-12-27 09:41:20 发布

阅读量1k

点赞数 1

文章标签： python vue java javascript js ViewUI

这篇文章将向您展示如何将CSV文件数据上传到AngularJS，读取数据，然后将其转换为JSON进行处理。然后，您将看到如何反向进行整个操作，并从AngularJS下载CSV数据转储。

首选CSV文件，因为它们很简单。它们也得到许多类型程序的广泛支持，并提供了一种表示电子表格数据的直接方法。

先决条件

在开始本教程之前，请确保您在计算机上安装了Node.js。如果您还没有，请访问官方网站并进行安装。

您还应该对以下技术有基本的了解：

HTML
CSS
JavaScript

如果已经安装了Node.js，请检查是否具有最新版本的Node和NPM。

node -v
npm -v

Angular中的CSV模块

在Angular中有几种处理CSV的方法，包括：

Papa Parse ：Papa Parse是一个功能强大的CSV解析器，它能够解析大小文件中的CSV字符串，以及转换回JSON。在本教程中，我们将使用此库。
csvtojson ：这是一个易于使用的节点包。
File Reader ：用于使用File或Blob对象读取文件内容，以指定要读取的文件。但是，这不是一种有效的方法，因为您仍然必须遍历CSV的所有行，然后JSON.stringify结果。

入门

我们的目标是能够做到以下几点：

在客户端下载CSV文件
上载CSV文件
读取CSV文件
将CSV文件数据转换为JSON以进行处理

我们的界面应如下所示：

首先，我们将为上面显示的界面编写HTML代码。

创建一个名为my_project的文件夹，将cd插入project文件夹，并创建两个文件： home.html和app.js。

mkdir my_project
cd my_project
touch home.html
touch app.js

由于我们将使用Papa Parse模块，因此请转到官方网站并下载库。接下来，解压缩内容并将papaparse.js和papaparse.min.js文件保存在项目文件夹中。您的项目结构应如下所示：

my_project/ 
  app.js
  home.html
  papaparse.js
  papaparse.min.js

以下是用于创建我们的界面HTML代码。将其另存为home.html 。

<!DOCTYPE html ng-app="myApp" ng-strict-di="true">
<html lang="en" ng-app="myApp" class="no-js"> <!--<![endif]-->

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="papaparse.js"></script>
<script src="papaparse.min.js"></script>
<body ng-controller = "CsvCtrl">

<section class="content">

    <div class="row">
          <div class="col-md-12">
              <div class="panel-heading"><strong>BULK TOP UP</strong> <small></small></div>
              <div class="box box-info">
                <div class =  "instructions"> 
                <ol>
                  <li>The Excel file should contain three columns </li>
                  <li>The first column contains the <strong>Reference</strong></li>
                  <li>The second column contains the <strong>First name</strong></li>
                  <li>The third column contains the <strong>Last name </strong> </li>
                  <li>The second column contains the <strong>Date of Birth</strong></li>
                  <li>The third column contains the <strong>Sex</strong>of the person</li>

              </ol>
                <div class="box-body table-responsive">
                  <p>The column headers should be <strong>Reference</strong> ,<strong>First_name</strong> ,<strong>Last_name</strong>,<strong>Dob</strong>,<strong>Sex</strong></p>
                  <p>  A sample file is available for download</p>
                  <form>
                    <button data-ng-click="download()">Download CSV</button> 
                    </form>
               </div>
             </div>
                <div class="box-body table-responsive">
                    <hr>
                    <hr>
                    <!-- form start -->
                    <p>Your uploaded csv file will be shown to you in a preview  for Confirmation</p>
                    <form role="form" class="form-horizontal" name="bulkDirectForm" method="post" enctype="multipart/form-data" novalidate>
                      <div class="box-body">
                        <div id="messages" class="alert alert-success" data-ng-show="messages" data-ng-bind="messages"></div>
                        <div id="warning" class="alert alert-warning" data-ng-show="warning" data-ng-bind="warning"></div>
                        
                        <div class="form-group">
                          <div class="col-sm-10">
                            <input type="file" class="form-control" id="bulkDirectFile" placeholder="CSV file with phone numbers and amount" ng-model="prd.bulk_direct_file" required accept=".csv">
                          </div>
                          <div class="col-sm-2">
                            <button type="submit" class="btn btn-block btn-info" ng-hide="myVar" data-ng-click="submitForm(bulkDirectForm)">Upload!</button>
                          </div>
                          

                          <br>
                          <br>
                          
                  
                          <div class="col-sm-10" ng-show = title id ="Table">
                          <h5>Confirm file to be uploaded and Click the Proceed Button Below</h5>
                         
              
                          <div id="dvCSV"></div>

                          <br>
                          
                          <button type="button" class="btn btn-success" data-ng-click="add()">Proceed!</button>
                          </div>


                          
                        </div>

                      </div>
                    </form>
                     
                </div>
              </div>
          </div>
     </div>


</section>

</body>
</html>

在上面的代码中，我们使用ng-app指令定义我们的应用程序。然后，我们将AngularJS和jQuery库以及其他脚本文件（即app.js ， papaparse.js和papaparse.min.js）添加到我们的网页。

然后，我们定义应用程序的控制器，然后将HTML控件绑定到应用程序数据。

下载CSV文件

由于我们已经有了带有链接的界面，用户可以在其中下载CSV文件，因此我们现在继续编写Angular代码，其中将包含要下载的数据，然后将其与HTML控件绑定。

然后，我们使CSV可在客户端下载。

在app.js中 ，初始化Angular应用并定义CsvCtrl控制器。

'use strict';


/* App Module */
var app = angular.module("myApp", []);

接下来，在JSON中定义样本数据，并在Papa Parse模块的帮助下将其转换为CSV文件。

app.controller("CsvCtrl", ["$scope", "$q", function($scope,$q) {
    
    var clearAlerts = function() {
      $scope.error = {}, $scope.warning = null
    };
      
    $scope.download = function(){
      var a = document.createElement("a");
      var json_pre = '[{"Reference":"1","First_name":"Lauri","Last_name":"Amerman","Dob":"1980","Sex":"F"},{"Reference":"2","First_name":"Rebbecca","Last_name":"Bellon","Dob":"1977","Sex":"F"},{"Reference":"3","First_name":"Stanley","Last_name":"Benton","Dob":"1984","Sex":"M"}]'
     
      var csv = Papa.unparse(json_pre);

      if (window.navigator.msSaveOrOpenBlob) {
        var blob = new Blob([decodeURIComponent(encodeURI(csv))], {
          type: "text/csv;charset=utf-8;"
        });
        navigator.msSaveBlob(blob, 'sample.csv');
      } else {

        a.href = 'data:attachment/csv;charset=utf-8,' + encodeURI(csv);
        a.target = '_blank';
        a.download = 'sample.csv';
        document.body.appendChild(a);
        a.click();
      }
    }
}]);

上载和读取CSV文件

这是上传和读取CSV文件的Angular函数。

app.controller("CsvCtrl", ["$scope", "$q", function($scope,$q) {
    
    // ...  the rest of the code
    
    // Upload and read CSV function
    $scope.submitForm = function(form) {
        clearAlerts();
        var filename = document.getElementById("bulkDirectFile");
        if (filename.value.length < 1 ){
            ($scope.warning = "Please upload a file");
        } else {
            $scope.title = "Confirm file";
            var file = filename.files[0];
            console.log(file)
            var fileSize = 0;
            if (filename.files[0]) {
                 
                var reader = new FileReader();
                reader.onload = function (e) {
                    var table = $("<table />").css('width','100%');
                    
                    var rows = e.target.result.split("\n");
                    for (var i = 0; i < rows.length; i++) {
                        var row = $("<tr  />");
                        var cells = rows[i].split(",");
                        for (var j = 0; j < cells.length; j++) {
                            var cell = $("<td />").css('border','1px solid black');
                            cell.html(cells[j]);
                            row.append(cell);
                        }
                        table.append(row);
                    }
                    $("#dvCSV").html('');
                    $("#dvCSV").append(table);
                }
                
                reader.readAsText(filename.files[0]);
            
            }
            return false;
        }
    }
         
}]);

在这里，我们确认CSV是否有效且不为空。如果为空或尚未上传CSV文件，我们会向用户显示警告消息：“请上传文件”。如果CSV有效，我们将数据转换为表格格式并显示如下。

将CSV文件转换为JSON

在本教程的最后一部分中，将CSV数据转换为JSON格式（一种API可以使用的形式）。下面是将CSV数据转换为JSON的函数。由于我们没有使用数据的API，因此我们只会将数据打印到控制台。

app.controller("CsvCtrl", ["$scope", "$q", function($scope,$q) {
    
    // ...
    
    //   Convert to JSON function
    $scope.add = function(){
        var Table = document.getElementById('Table');
        var file = document.getElementById("bulkDirectFile").files[0];
        $('.loading').show();
        var allResults = [];
        
        Papa.parse(file, {
            download: true,
            header: true,
            skipEmptyLines: true,
            error: function(err, file, inputElem, reason) { },
            complete: function(results) {
                allResults.push(results.data);
                console.log(results.data)
                
            }
          });   
        }
    }    
}]);

在上面的函数中，我们获取了CSV文件，然后使用Papa Parse将其转换为JSON。 app.js的完整代码如下所示。