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中引用的代码

 <button (click)="exportCSV()">
    <span>Click me!</span>
  </button>

其实我也是借鉴了好多人,下面放借鉴的链接
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

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值