时间戳

首页 > 解决方案 > 如何以角度在一个csv文件中导出多个html表？

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

问题描述

我在一个文件中有多个 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 文件中。

标签： htmlangularexcelhtml-table

解决方案

在我看来，在这种情况下没有必要使用该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;
  }
}

推荐阅读