角度 5：如何将数据导出到 csv 文件

Posted 2023-02-14

【中文标题】角度 5：如何将数据导出到 csv 文件

【英文标题】：ANGULAR 5 : how to export data to csv file

【发布时间】：2018-12-31 10:20:22

【问题描述】：

我是 Angular 的初学者，我正在开发 Angular 5，Node v8.11.3。

我想实现一个接受参数数据和标题的通用函数。并作为输出一个 csv 文件。

我创建了一个名为“FactureComponent”的组件，然后我生成了一个服务 称为“ DataService ”，然后我创建了一个 getFactures 函数，该函数从模拟中检索我的项目列表，并且效果很好。

import  Component, OnInit  from '@angular/core';
import  DataService  from '../data.service';
import  FACTURES  from '../mock.factures';

@Component(
selector: 'app-facture',
templateUrl: './facture.component.html',
styleUrls: ['./facture.component.scss']
)
export class FactureComponent implements OnInit 

factures = [];
columns  = ["Id","Reference","Quantite","Prix Unitaire"];
btnText:  String = "Export CSV";

constructor(private _data: DataService)  

ngOnInit() 
this.getFactures();

getFactures()
this.factures=this._data.getFactures();

generateCSV()
console.log("generate");

您会在视图下方找到

<form>
<input type="submit" [value]="btnText" (click)="generateCSV()"/>
</form>

<table>
 <tr>
   <th *ngFor="let col of columns">
      col
   </th>
 </tr>
 <tr *ngFor="let facture of factures">
  <td>facture.id</td>     
  <td>facture.ref</td>
  <td>facture.quantite</td>
  <td>facture.prixUnitaire</td>
 </tr>
</table>

所以我想实现一个功能，将视图上显示的数据转换为 csv 文件。

【问题讨论】：

这就是你在 javascript 中的做法，通过一些修改应该很容易让它在 TypeScript 中工作***.com/questions/8847766/…

唯一可能不同的部分是 fs.WriteFile

@BradenBrown 感谢您的回复。我们不能不使用 javascript 来做到这一点？

您只想下载 csv 文件吗？还是保存到本地文件？

@BradenBrown 只需下载 csv

【参考方案1】：

我的解决方案目前正在为储蓄提供服务（我从Changhui Xu @ codeburst 得到这个）。无需为此安装任何软件包...

import  Injectable  from '@angular/core';

declare global 
    interface Navigator 
        msSaveBlob?: (blob: any, defaultName?: string) => boolean
    


@Injectable(
    providedIn: 'root',
)
export class CsvDataService 
    exportToCsv(filename: string, rows: object[]) 
      if (!rows || !rows.length) 
        return;
      
      const separator = ',';
      const keys = Object.keys(rows[0]);
      const csvContent =
        keys.join(separator) +
        '\n' +
        rows.map(row => 
          return keys.map(k => 
            let cell = row[k] === null || row[k] === undefined ? '' : row[k];
            cell = cell instanceof Date
              ? cell.toLocaleString()
              : cell.toString().replace(/"/g, '""');
            if (cell.search(/("|,|\n)/g) >= 0) 
              cell = `"$cell"`;
            
            return cell;
          ).join(separator);
        ).join('\n');
  
      const blob = new Blob([csvContent],  type: 'text/csv;charset=utf-8;' );
      if (navigator.msSaveBlob)  // IE 10+
        navigator.msSaveBlob(blob, filename);
       else 
        const link = document.createElement('a');
        if (link.download !== undefined) 
          // Browsers that support HTML5 download attribute
          const url = URL.createObjectURL(blob);
          link.setAttribute('href', url);
          link.setAttribute('download', filename);
          link.style.visibility = 'hidden';
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
        
      
    
  

然后我将这个服务注入到我的组件中。然后它调用这个服务：

  constructor(private csvService :CsvDataService) 

  saveAsCSV() 
    if(this.reportLines.filteredData.length > 0)
      const items: CsvData[] = [];

      this.reportLines.filteredData.forEach(line => 
        let reportDate = new Date(report.date);
        let csvLine: CsvData = 
          date: `$reportDate.getDate()/$reportDate.getMonth()+1/$reportDate.getFullYear()`,
          laborerName: line.laborerName,
          machineNumber: line.machineNumber,
          machineName: line.machineName,
          workingHours: line.hours,
          description: line.description
        
        items.push(csvLine); 
      );

      this.csvService.exportToCsv('myCsvDocumentName.csv', items);
    
    
  

【讨论】：

此解决方案在字符串的开头和结尾添加额外的引号

请注意，自 2022 年起，msSaveBlob 不再作为导航器的一部分提供：***.com/questions/69485778/…

@glenatron 我已更新答案以包含您的答案提供的全局声明

【参考方案2】：

更新： 这是更好的方法：

在您的项目目录中打开命令提示符。 通过键入npm install --save file-saver 安装文件保护程序 import saveAs from 'file-saver'; 到您的 .ts 文件中。 这是基于新导入的更新代码。

downloadFile(data: any) 
    const replacer = (key, value) => value === null ? '' : value; // specify how you want to handle null values here
    const header = Object.keys(data[0]);
    let csv = data.map(row => header.map(fieldName => JSON.stringify(row[fieldName], replacer)).join(','));
    csv.unshift(header.join(','));
    let csvArray = csv.join('\r\n');

    var blob = new Blob([csvArray], type: 'text/csv' )
    saveAs(blob, "myFile.csv");

感谢answer 将对象转换为 CSV。

使用方法如下：

downloadFile(data: any) 
  const replacer = (key, value) => (value === null ? '' : value); // specify how you want to handle null values here
  const header = Object.keys(data[0]);
  const csv = data.map((row) =>
    header
      .map((fieldName) => JSON.stringify(row[fieldName], replacer))
      .join(',')
  );
  csv.unshift(header.join(','));
  const csvArray = csv.join('\r\n');

  const a = document.createElement('a');
  const blob = new Blob([csvArray],  type: 'text/csv' );
  const url = window.URL.createObjectURL(blob);

  a.href = url;
  a.download = 'myFile.csv';
  a.click();
  window.URL.revokeObjectURL(url);
  a.remove();

如果我找到更好的方法，我会在以后添加。

【讨论】：

对于 *.ts 文件，添加 npm install @types/file-saver --save-dev

npm install @types/file-saver --save-dev

Ref URL -- 此外，可以通过以下方式安装 TypeScript 定义：npm install @types/file-saver --save-dev

导入方式已更改 - import saveAs from 'file-saver';

我运行了 npm install @types/file-saver --save-dev，从 'file-saver' 导入 saveAs ；但它仍然显示“找不到 moduke 文件保护程序”