首页 > 解决方案 > 从 Angular 5 返回 CSV 文件

问题描述

我正在寻找一种从数组中的数据创建 CSV 文件并由用户下载的解决方案。当然在按下按钮之后。哪个选项需要最少的努力并且最适合 angular5?

我找到了一个:

npm install file-saver --save

标签: angulartypescript

解决方案


您不需要 Angular 来执行此操作,只需普通的 javascript:

// create the csv
const headers = ['header1', 'header2', ...];
let csvContent = 'data:text/csv;charset=utf-8,%EF%BB%BF';
csvContent += headers.join(';') + '\n';
for (const d of data) {
  const row = [d.cell1, d.cell2].join(';');
  csvContent += row + '\n';
}

// do the download stuff
const encodedUri = csvContent;
const link = document.createElement('a');
link.setAttribute('target', '_blank');
link.setAttribute('href', encodedUri);
link.setAttribute('download', `your_filename.csv`);
document.body.appendChild(link);
link.click();
link.remove();

推荐阅读