Angular之如何前台完成导出csv文件

直接上代码

下面这个是我 log.component.ts中的代码

export class LogComponent implements OnInit {
     
  userId = ''; // 用户ID
  userName = ''; // 用户名
  description = ''; // 用户描述
  datetime = ''; // 登陆时间
  csvSeparator = ',';
  logs: Logs[];
  constructor(private getAllLogsService: GetAllLogsService, private router: Router) {
      }

  ngOnInit(): void {
     
    const params = {
     
      userId: this.userId,
      userName: this.userName,
      description: this.description,
      datetime: this.datetime
    };
    this.getAllLogsService.getAllLogs(params).subscribe((logs: Logs[]) => {
     
      this.logs = logs;
    });
  }
  exportCSV(value = this.logs, columns = ['userId', 'userName', 'description', 'datetime'], exportFilename = '用户LOG表') {
     

    const data = value;
    let csv = '\ufeff';
    for (let i = 0; i < columns.length; i++) {
     
      const column = columns[i];
      // columns.header ???
      // columns[i] | column ???
      // 如何自动提取列名
      csv += '"' + (columns[i]) + '"';
      if (i < (columns.length - 1)) {
     
        csv += this.csvSeparator;
      }
    }
    // body
    data.forEach((record) => {
     
      csv += '\n';
      // tslint:disable-next-line: variable-name
      for (let i_1 = 0; i_1 < columns.length; i_1++) {
     
        const column = columns[i_1];
        csv += '"' + this.resolveFieldData(record, column) + '"';
        if (i_1 < (columns.length - 1)) {
     
          csv += this.csvSeparator;
        }
      }
    });
    const blob = new Blob([csv], {
     
      type: 'text/csv;charset=utf-8;'
    });
    if (window.navigator.msSaveOrOpenBlob) {
     
      navigator.msSaveOrOpenBlob(blob, exportFilename + '.csv');
    } else {
     
      const link = document.createElement('a');
      link.style.display = 'none';
      document.body.appendChild(link);
      if (link.download !== undefined) {
     
        link.setAttribute('href', URL.createObjectURL(blob));
        link.setAttribute('download', exportFilename + '.csv');
        link.click();
      } else {
     
        csv = 'data:text/csv;charset=utf-8,' + csv;
        window.open(encodeURI(csv));
      }
      document.body.removeChild(link);
    }
  }
  resolveFieldData(data, field) {
     
    if (data && field) {
     
      if (field.indexOf('.') === -1) {
     
        return data[field];
      } else {
     
        const fields = field.split('.');
        let value = data;
        for (let i = 0, len = fields.length; i < len; ++i) {
     
          if (value === null) {
     
            return null;
          }
          value = value[fields[i]];
        }
        return value;
      }
    } else {
     
      return null;
    }
  }
}

##下面是html中引用的代码

 (click)="exportCSV()">
    Click me!
  

其实我也是借鉴了好多人，下面放借鉴的链接
https://blog.csdn.net/xcx0215/article/details/78799403?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-8.nonecase&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-8.nonecase