直接上代码

下面这个是我 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

最后

以上就是淡定丝袜为你收集整理的Angular之如何前台完成导出csv文件直接上代码的全部内容，希望文章能够帮你解决Angular之如何前台完成导出csv文件直接上代码所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。