数据集对于构建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>
首先，让我们创建一个简单的类来建模员工。该模型将被角组件所消耗。
export class User {<br> name: string;<br> email: string;<br> city: string;<br>}<br>服务访问和呈现数据的原因。在我们的用例中，我们需要一项服务来下载和导入CSV数据。
>我们的服务文件是 的形式以文件的形式获取文件的内容。输入标签具有诸如[Accept]>之类的属性，并且 >，可以将上述功能与app.component.html appmont.html ，现在该构建 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. 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>登录后复制了。这是所有提供商，进口，声明和引导程序组件的地方。 在此更改后，您将能够看到以下屏幕。<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
以上是如何使用Angular上传和下载CSV文件的详细内容。更多信息请关注PHP中文网其他相关文章！
