typescript - 如何在 Angular 10 中将 Angular 表导出为 csv

我有一个表格，是从存储在数据库中的 BLOB HTML 生成的。我已经成功将生成的表格导出为 Excel 和 PDF，现在我需要将同一个表格导出为 CSV。我尝试过研究，但我得到的都是传递 JSON 后生成 CSV 的方法，而我只想传递表格 ID 并导出为 CSV。

我为Excel所做的事情。

 exportexcel(): void {
    /* table id is passed over here */
    let element = document.getElementById('htmlData');
    const ws: XLSX.WorkSheet =XLSX.utils.table_to_sheet(element);

    /* generate workbook and add the worksheet */
    const wb: XLSX.WorkBook = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');

    /* save to file */
    XLSX.writeFile(wb, this.fileName);

  }

我如何通过传递 let element=document.getElementById('htmlData'); 来实现相同的操作并导出为 CSV。我不想使用 mat-table-exporter 的方式。提前感谢

答案＃1

以下代码可能对你有帮助！

 exportcsv(): void {
    let csv='';
    let table=document.getElementById("htmlData");
    let tr=table.children[0].children[0];
    for(let i=0;i<tr.children.length;i++)
    {
        csv+=tr.children[i].innerText+",";
    }
    csv=csv.substring(0,csv.length-1)+"\n";
    let tbody=table.children[1];
    for(let i=0;i<tbody.children.length;i++)
    {
        for(let j=0;j<tbody.children[i].children.length;j++)
        {
            csv+=tbody.children[i].children[j].innerText+",";
        }
        csv=csv.substring(0,csv.length-1)+"\n";
    }
    csv=csv.substring(0,csv.length-1)+"\n";
        let hiddenElement = document.createElement('a');
        hiddenElement.href = 'data:text/csv;charset=utf-8,' + encodeURI(csv);
        hiddenElement.target = '_blank';
        hiddenElement.download = 'data.csv';
        hiddenElement.click();
}

答案＃2

如果你需要更多动态功能，那么不要将 HTML 元素转换为 CSV。例如，如果将来你想实现分页等功能，那么可以按如下方式进行：

exportCsv(): void {
  let csv = '';
  for (let column = 0; column < this.columns.length; column++) {
    csv += this.columns[column] + ';';
    csv = csv.replace(/\n/g, '');
  }
  csv = csv.substring(0, csv.length - 1) + '\n';
  const rows = this.filterdRows;

  for (let row = 0; row < rows.length; row++) {
   for (let rowElement = 0; rowElement < rows[row].length; rowElement++) {
      csv += rows[row][rowElement] + ';';
   }
    csv = csv.substring(0, csv.length - 1) + '\n';
  }
  csv = csv.substring(0, csv.length - 1) + '\n';
  const docElement = document.createElement('a');
  const universalBOM = '\uFEFF';

  //You can edit the code for the file name according to your requirements
  let filename = this.filename + '_';
  filename = filename.concat(this.currentDateString.toString());
  const fileNameWithType = filename.concat('.csv');
  docElement.href = 'data:text/csv;charset=utf-8,' + encodeURI(universalBOM + csv);
  docElement.target = '_blank';
  docElement.download = fileNameWithType;
  docElement.click();
}