正确的方式将数据导出为Excel？

我目前正试图从我的应用程序以Excel或CSV导出一些数据。 什么是完成这个最好的方法？ 我应该从后端导出还是导出一次我有数据客户端使用Angular 2中的库？ 我的Web API 2控制器当前生成一个列表，然后将其作为JSON发送到前端。

这一切工作，我只是在出口清单挣扎。

这是我正在做的一个样本

[HttpGet] [Route("/api/preview/{item}")] public IActionResult Preview(string item) { if (item!= null) { var preview = _context.dbPreview.FromSql("Exec sampleStoredProcedure {0}, 1", item).ToList(); return Ok(preview); } } 

这就是我如何生成发送给Angular 2的数据。

如果有必要，我可以提供任何Angular 2代码，但这只是一个正常的服务。 不知道是否有一些图书馆与Angular 2运行良好的出口。 我已经看到了一些JavaScript的，但alaSQL的东西，但它似乎不会用于Angular 2。

有任何想法吗？

Answer 1

我查看了PrimeNG DataTable的源代码，我想你可以使用exportCSV代码来导出一个CSV数据。

“技巧”是生成一个以data:text/csv;charset=utf-8开头的string，并由用户下载。

像下面的代码应该为你工作（也许你需要修改它，所以适合你的数据）。

除了下载方法之外，大多数代码是从PrimeNG复制的。 该方法是从一个SO答案复制。

 import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'app works!'; csvSeparator = ';'; value = [ { name: 'A3', year: 2013, brand: 'Audi' }, { name: 'Z3', year: 2015, brand: 'BMW' } ]; columns = [ { field: 'name', header: 'Name' }, { field: 'year', header: 'Production data' }, { field: 'brand', header: 'Brand' }, ]; constructor() { console.log(this.value); this.exportCSV('cars.csv'); // just for show casing --> later triggered by a click on a button } download(text, filename) { let element = document.createElement('a'); element.setAttribute('href', 'data:text/csv;charset=utf-8,' + encodeURIComponent(text)); element.setAttribute('download', filename); element.style.display = 'none'; document.body.appendChild(element); element.click(); document.body.removeChild(element); } exportCSV(filename) { let data = this.value, csv = ''; // csv = "data:text/csv;charset=utf-8,"; //headers for (let i = 0; i < this.columns.length; i++) { if (this.columns[i].field) { csv += this.columns[i].field; if (i < (this.columns.length - 1)) { csv += this.csvSeparator; } } } //body this.value.forEach((record, j) => { csv += '\n'; for (let i = 0; i < this.columns.length; i++) { if (this.columns[i].field) { console.log(record[this.columns[i].field]); // resolveFieldData seems to check if field is nested eg data.something --> probably not needed csv += record[this.columns[i].field]; //this.resolveFieldData(record, this.columns[i].field); if (i < (this.columns.length - 1)) { csv += this.csvSeparator; } } } }); // console.log(csv); // window.open(encodeURI(csv)); // doesn't display a filename! this.download(csv, filename); } // resolveFieldData(data: any, field: string): any { // if(data && field) { // if(field.indexOf('.') == -1) { // return data[field]; // } // else { // let fields: string[] = field.split('.'); // let value = data; // for(var i = 0, len = fields.length; i < len; ++i) { // value = value[fields[i]]; // } // return value; // } // } // else { // return null; // } // } } 

Answer 2

AWolfs的回答让我走上了正确的轨道，但我做了一些调整，以使其与Internet Explorer一起工作。

这个函数将我的数组转换为我的csv文件的string。 （我不得不创build一个新的对象，这是我的列标题）。 然后我只是将由我的服务生成的数据传递给函数，并为我进行parsing。 对于更复杂的数据，我相信你会需要做一些额外的逻辑，但我有基本的文字，所以这一切都为我解决。

 exportCSV(filename, CsvData) { let data = CsvData, csv = ''; console.log(data); //headers for (let i = 0; i < this.columns.length; i++) { if (this.columns[i].field) { csv += this.columns[i].field; if (i < (this.columns.length - 1)) { csv += this.csvSeparator; } } } //body CsvData.forEach((record, j) => { csv += '\n'; for (let i = 0; i < this.columns.length; i++) { if (this.columns[i].field) { console.log(record[this.columns[i].field]); csv += record[this.columns[i].field]; if (i < (this.columns.length - 1)) { csv += this.csvSeparator; } } } }); this.DownloadFile(csv, filename); } 

这与AWolfs的答案几乎相同，但是我必须对DownloadFile函数进行一些修改才能使其与其他浏览器一起使用。 这个函数只接受构成你的.CSV文件和文件名的大string。

  DownloadFile(text, filename) { console.log(text); var blob = new Blob([text], { type: 'text/csv;charset=utf-8;' }); if (navigator.msSaveBlob) { // IE 10+ navigator.msSaveBlob(blob, filename); } else //create a link and click it { var link = document.createElement("a"); if (link.download !== undefined) // feature detection { // Browsers that support HTML5 download attribute var url = URL.createObjectURL(blob); link.setAttribute("href", url); link.setAttribute("download", filename); link.style.visibility = 'hidden'; document.body.appendChild(link); link.click(); document.body.removeChild(link); } } } 

这个代码需要清理，但我想用一个答案来更新我的问题，任何人都在为同样的事情而苦苦挣扎。 这至less应该让你开始。 这适用于Chrome和IE。

谢谢。