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

数据集对于构建API模型和各种业务流程至关重要。这就是为什么导入和导出CSV是经常需要的功能。

在本教程中，您将学习如何在Angular App中下载和导入CSV文件。我们将使用包含员工详细信息的CSV文件。该代码将用打字稿编写。 

>

>在开始之前，您需要设置一个新的角度环境，创建一个具有初始应用程序的新工作区，然后开始服务。可以在官方教程中找到为您的Angular应用程序创建样板的分步指南。

>这是样本板应用程序的文件夹结构：

Root<br>-- src<br>---- app<br>------ app-routing.module.ts<br>------ app.component.css<br>------ app.component.html<br>------ app.component.ts<br>------ app.module.ts<br>---- models<br>---- services<br>------ csv.services.ts<br>---- index.html<br>---- main.ts<br>---- styles.css<br>

1。创建一个简单的模型

首先，让我们创建一个简单的类来建模员工。该模型将被角组件所消耗。

持有员工详细信息的模型如下。这只是员工姓名，电子邮件和城市的基本模型。 

export class User {<br>  name: string;<br>  email: string;<br>  city: string;<br>}<br>

2。构建服务

角度应用具有模块化结构。这使应用程序可靠且易于维护。任何角应用程序的主要规则之一是，必须不允许组件直接保存或获取数据。这就是为什么您必须利用

服务访问和呈现数据的原因。在我们的用例中，我们需要一项服务来下载和导入CSV数据。

>我们的服务文件是。 >创建服务后，可以将其注入任何组件中。在制作函数之前，将以A＆lt; a＆gt;。

的形式以文件的形式获取文件的内容。输入标签具有诸如[Accept]>之类的属性，并且 type >必须为

> [Accept]

>

>>（change）>>> 将调用$ event 具有属性，该属性具有文件的内容。 text（）来自文件。请记住，读取文件的方法应该是异步的，这就是为什么我们将使用异步。  从CSV文件中读取文本的简单代码在这里：>一旦从CSV文件中提取了文本内容，我们就可以使用步骤2中定义的服务。

>，可以将上述功能与app.component.html appmont.html

private async getTextFromFile(event: any) {<br>    const file: File = event.target.files[0];<br>    let fileContent = await file.text();<br>    <br>    return fileContent;<br>}<br>

public async importDataFromCSV(event: any) {<br>    let fileContent = await this.getTextFromFile(event);<br>    this.importedData = this._csvService.importDataFromCSV(fileContent);<br>}<br>

，现在该构建

app.module.ts

<div>Export simple data</div><br><input<br>  #fileUploadSimple<br>  [accept]="'.csv'"<br>  type="file"<br>  class="file-input"<br>  (change)="importDataFromCSV($event)"<br>  hidden="true"<br>/><br><button (click)="fileUploadSimple.click()">Import from csv</button><br><br /><br /><br>

了。这是所有提供商，进口，声明和引导程序组件的地方。 在此更改后，您将能够看到以下屏幕。

Live Demo

Conclusion

In this post, you saw how to upload and download CSV data, and how to parse CSV data into and out of a text file. 

以上是如何使用Angular上传和下载CSV文件的详细内容。更多信息请关注PHP中文网其他相关文章！