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

数据集对于构建 api 模型和各种业务流程极为重要。这就是为什么导入和导出 csv 是一项经常需要的功能。

在本教程中，您将学习如何在 angular 应用程序中下载和导入 CSV 文件。我们将使用包含员工详细信息的 CSV 文件。代码将用 typescript 编写。 

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

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

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

1.创建一个简单的模型

首先，让我们创建一个简单的类来为员工建模。这个模型将被 Angular 组件使用。

保存员工详细信息的模型如下所示。这只是一个包含员工姓名、电子邮件和城市的基本模型。 

export class User {
  name: string;
  email: string;
  city: string;
}

2.构建服务

Angular 应用程序具有模块化结构。这使得应用程序健壮且易于维护。任何 Angular 应用程序的主要规则之一是不得允许组件直接保存或获取数据。这就是为什么您必须使用服务来访问和呈现数据的原因。在我们的用例中，我们需要一个用于下载和导入 CSV 数据的服务。

我们的服务文件是csv.services.ts。 

一旦服务被创建，它就可以被注入到任何组件中。在使CSV.service可用于注入之前，需要在app.module.ts中将其注册为提供者。

在此演示中，我们将编写两种不同类型的功能：

• 将数据保存到 CSV 文件中

• 从 CSV 导入数据

将数据保存到 CSV 的方法

首先，让我们处理最简单的功能。将数据保存到 CSV 中涉及读取对象数组。javascript 中的对象带有具有值的属性。我们将读取每个对象的所有这些属性，并用逗号连接它们。以下代码行将实现此目的：

let propertyNames = Object.keys(data[0]);
let rowWithPropertyNames = propertyNames.join(',') + '\n';

加入标题后，它们将作为 第一行附加。之后，循环将遍历数组并读取所有属性及其值。这些值将附加到 CSV 文件中。 

下面给出了构建标头、读取数组内容和构建 CSV 的完整代码。

public saveDataInCSV(data: Array<any>): string {
    if (data.length == 0) {
      return '';
    }
    let propertyNames = Object.keys(data[0]);
    let rowWithPropertyNames = propertyNames.join(',') + '\n';
    let csvContent = rowWithPropertyNames;
    let rows: string[] = [];
    data.forEach((item) => {
      let values: string[] = [];
      propertyNames.forEach((key) => {
        let val: any = item[key];
        if (val !== undefined && val !== null) {
          val = new String(val);
        } else {
          val = '';
        }
        values.push(val);
      });
      rows.push(values.join(','));
    });
    csvContent += rows.join('\n');
    return csvContent;
  }

从 CSV 导入数据的方法

我们的下一个服务是 从 CSV 导入数据。为此，我们将定义一个function以string. 属性名称和数据行将从文件的内容创建。 

const propertyNames = csvText.slice(0, csvText.indexOf('\n')).split(',');
const dataRows = csvText.slice(csvText.indexOf('\n') + 1).split('\n');

使用上面的代码行，我们将同时拥有属性名称和数据。有了这些信息，我们只剩下打印 CSV 内容的工作了。打印内容的代码如下：

public importDataFromCSV(csvText: string): Array<any> {
    const propertyNames = csvText.slice(0, csvText.indexOf('\n')).split(',');
    const dataRows = csvText.slice(csvText.indexOf('\n') + 1).split('\n');
    let dataArray: any[] = [];
    dataRows.forEach((row) => {
      let values = row.split(',');
      let obj: any = new Object();
      for (let index = 0; index < propertyNames.length; index++) {
        const propertyName: string = propertyNames[index];
        let val: any = values[index];
        if (val === '') {
          val = null;
        }
        obj[propertyName] = val;
      }
      dataArray.push(obj);
    });
    return dataArray;
  }

3.构建 UI 元素

接下来，我们将构建用于导入和导出 CSV 文件的 HTML 元素。 

UI 元素的文件是app.component.html。

保存 CSV 的内容 

要保存 CSV 文件，我们将使用一种非常传统的 JavaScript 下载文件的方式。 

1. 创建一个隐藏的锚点元素<a>。

2. href将此锚元素的类型设置为data:text/csv。

3. 自动触发click事件。

下面给出了下载 CSV 文件的完整代码。此代码将在app.component.ts中。

public saveDataInCSV(name: string, data: Array<any>): void {
    let csvContent = this._csvService.saveDataInCSV(data);
    
    var hiddenElement = document.createElement('a');
    hiddenElement.href = 'data:text/csv;charset=utf-8,' + encodeURI(csvContent);
    hiddenElement.target = '_blank';
    hiddenElement.download = name + '.csv';
    hiddenElement.click();
}

这是我们可以传递给上述函数的一些示例数据。如您所见，我们正在使用在步骤 1 中创建的模型。

public arrayWithSimpleData: Array<User> = [
    { name: 'Eve', email: 'eve22@mail.com', city: 'San Francisco' },
    { name: 'John', email: 'john123@mail.com', city: 'London' },
    { name: 'Nick', email: 'super0nick@mail.com', city: 'Madrid' },
];

接下来，我们将把上述功能链接到一个按钮，该按钮将显示在屏幕上供我们单击。这将在app.component.html中输入。

<button (click)="saveDataInCSV('simpleData', arrayWithSimpleData)">
  Save simple data array
</button>

读取 CSV 的内容

<input>使用标签打开和读取 HTML 文件非常简单。输入标签带有type、[accept]和等属性(change)。

• type必须'file'表明用户将选择一个文件。 

• [accept]必须'.csv'表明只应向用户显示 CSV 文件以供选择。 

• (change)将使用具有文件内容属性的参数调用该importDataFromCSV函数。$event

$event属性里面携带的是文件，event.target.files其中files是一个数组。文件的内容可以以不同的格式提取。对于我们的用例，我们将从text()文件中提取。请记住，读取文件的方法应该是异步的，这就是我们使用awaitand的原因async。从 CSV 文件中读取文本的简单代码如下：

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

从 CSV 文件中提取文本内容后，我们就可以使用步骤 2 中定义的服务。 

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

上面的功能可以与app.component.html中的按钮链接。

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

4.整合整个应用

现在，是时候构建app.module.ts 了。这是所有提供者、导入、声明和引导程序组件将被注册的地方。

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { CsvService } from '../services/csv.services';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AppRoutingModule, FormsModule],
  providers: [CsvService],
  bootstrap: [AppComponent],
})
export class AppModule {}

通过此更改，您将能够看到以下屏幕。

现场演示

结论

在本文中，您了解了如何上传和下载 CSV 数据，以及如何将 CSV 数据解析为文本文件和从文本文件中解析出来。