如何以角度在一个csv文件中导出多个html表？答案

【问题标题】：How to export multiple html tables in one csv file in angular?如何以角度在一个csv文件中导出多个html表？
【发布时间】：2023-03-15 12:44:01
【问题描述】：

我在一个文件中有多个 html 表。我想导出 csv 文件中的所有表格。

我正在使用“XLSX”包。

 exportAsXLSX() {
        let element = document.querySelectorAll('csv-table');
        const ws: XLSX.WorkSheet = XLSX.utils.table_to_sheet(element);
        const wb: XLSX.WorkBook = XLSX.utils.book_new();
        XLSX.utils.book_append_sheet(wb, ws, 'sheet1');
        XLSX.writeFile(wb, this.fileName);       
    }

有没有其他方法可以将我的所有表格导出到一个 csv 文件中。

【问题讨论】：

标签： html angular excel html-table

【解决方案1】：

在我看来，在这种情况下没有必要使用xlsx 库。您当然基于组件类中存在的数据模型创建了 HTML 表。因此，您可以简单地连接来自不同表的数据并将它们一起写入CSV 文件。

这可以通过以下服务来完成（代码从 koia.io 借用）。

import { Injectable } from '@angular/core';
import { DatePipe } from '@angular/common';
import * as FileSaver from 'file-saver';

@Injectable({
  providedIn: 'root'
})
export class CSVExportService {

  private static readonly TYPE_CSV = 'text/csv;charset=UTF-8';

  private newline = '\n';
  private datePipe = new DatePipe('en-US');
  private timeFormat = 'yyyy-mm-dd_HHmmss';

  exportAsCSV(data: Object[], baseFileName: string): void {
    const csv = this.toCSV(data, ',');
    const blob: Blob = new Blob([csv], { type: CSVExportService.TYPE_CSV });
    FileSaver.saveAs(blob, this.generateFileName(baseFileName, '.csv'));
  }

  private toCSV(data: Object[], delimiter: string): string {
    const keys = Object.keys(data[0]);
    return keys.join(delimiter) + this.newline +
      data.map(e => this.toCSVLine(e, keys, delimiter))
        .join(this.newline);
  }

  private toCSVLine(element: Object, keys: string[], delimiter: string) {
    return keys.map(k => element[k])
      .join(delimiter);
  }

  private generateFileName(baseFileName: string, extension: string): string {
    const formattedDate = this.datePipe.transform(new Date().getTime(), this.timeFormat);
    return baseFileName + '_' + formattedDate + extension;
  }
}

【讨论】：