如何将数据表导出为csv文件 [英] how to export a data table into a csv file in angular
本文介绍了如何将数据表导出为csv文件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
需要帮助编辑它...
app.directive（'exportToCsv'，function（）{
return {
restrict：'A'，
link：function（scope，element，attrs）{
var el = element [0];
element.bind点击'，function（e）{
var table = e.target.nextElementSibling; //需要直接访问这个元素
var csvString ='';
for（var i = 0 ; i< table.rows.length; i ++）{
var rowData = table.rows [i] .cells;
for（var j = 0; j< rowData.length; j ++）{
csvString = csvString + rowData [j] .innerHTML +，;
}
csvString = csvString.substring（0，csvString.length - 1）;
csvString = csvString + \\\
;
}
csvString = csvString.substring（0，csvString.length - 1）;
var a = $（'< a />'，{
style：'di splay：none'，
href：'data：application / octet-stream; base64，'+ btoa（csvString），
下载：'emailStatistics.csv'
}）appendTo身体'）
a [0] .click（）
a.remove（）;
}）;
}
}
}）;
解决方案
我建议您使用可用的UI Grid在此链接此处
以下代码将允许您导出为 PDF 或 CSV
var app = angular.module（'app'，['ngAnimate'，'ngTouch'，'ui.grid'，'ui.grid.selection'，'ui.grid.exporter'，'ui.grid .moveColumns']）;
app.controller（'MainCtrl'，['$ scope'，'$ http'，function（$ scope，$ http）{
$ scope.gridOptions = {
columnDefs：[
{field：'name'}，
{field：'gender'，cellFilter：'mapGender'，exporterPdfAlign：'right'}，
{field：'company'可见：false}
]，
exporterLinkLabel：'get your csv here'，
exporterPdfDefaultStyle：{fontSize：9}，
exporterPdfTableStyle：{margin：[30，30，30 ，$]
exporterPdfTableHeaderStyle：{fontSize：10，bold：true，italics：true，color：'red'}，
exporterPdfOrientation：'portrait'，
exporterPdfPageSize：'LETTER' ，
exporterPdfMaxGridWidth：500，
exporterHeaderFilter：function（displayName）{
if（displayName ==='Name'）{
return'Person Name';
} else {
return displayName;
}
}，
exporterFieldCallback：functi on（grid，row，col，input）{
if（col.name =='gender'）{
switch（input）{
case 1：
return'female ';
break;
case 2：
return'male';
break;
default：
return'unknown';
break;
}
} else {
return input;
}
}，
onRegisterApi：function（gridApi）{
$ scope.gridApi = gridApi;
}
};
$ http.get（'/ data / 100.json'）
.success（function（data）{
data.forEach（function（row，index）{
if（row.gender ==='female'）{
row.gender = 1;
} else {
row.gender = 2;
}
}）;
$ scope.gridOptions.data = data;
}）;
$ scope.export = function（）{
if（$ scope.export_format =='csv'）{
var myElement = angular .element（document.querySelectorAll（。custom-csv-link-location））;
$ scope.gridApi.exporter.csvExport（$ scope.export_row_type，$ scope.export_column_type，myElement）;
} else if（$ scope.export_format =='pdf'）{
$ scope.gridApi.exporter.pdfExport（$ scope.export_row_type，$ scope.export_column_type）;
};
};
}]）
.filter（'mapGender'，function（）{
return function（input）{
switch（input）{
case 1：
return'female';
break;
case 2：
return'male';
break;
default：
return '未知';
break;
}
};
}）;
HTML将看起来像
< div ui-grid =gridOptionsui-grid-selection ui-grid-exporter ui-grid-move-columns class =grid>< / div>
i have a data table in my angularjs app and i want to export it to a csv file .i searched alot in internet and i found this directive ,but this only work when button is next to table . need help to edit it...
app.directive('exportToCsv',function(){
return {
restrict: 'A',
link: function (scope, element, attrs) {
var el = element[0];
element.bind('click', function(e){
var table = e.target.nextElementSibling;//need to access to this element directly
var csvString = '';
for(var i=0; i<table.rows.length;i++){
var rowData = table.rows[i].cells;
for(var j=0; j<rowData.length;j++){
csvString = csvString + rowData[j].innerHTML + ",";
}
csvString = csvString.substring(0,csvString.length - 1);
csvString = csvString + "\n";
}
csvString = csvString.substring(0, csvString.length - 1);
var a = $('<a/>', {
style:'display:none',
href:'data:application/octet-stream;base64,'+btoa(csvString),
download:'emailStatistics.csv'
}).appendTo('body')
a[0].click()
a.remove();
});
}
}
});
解决方案
I would suggest you to use UI Grid which is available at this link here
The below code will allow you to export to either PDF or CSV
var app = angular.module('app', ['ngAnimate', 'ngTouch', 'ui.grid', 'ui.grid.selection', 'ui.grid.exporter', 'ui.grid.moveColumns']);
app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {
$scope.gridOptions = {
columnDefs: [
{ field: 'name' },
{ field: 'gender', cellFilter: 'mapGender', exporterPdfAlign: 'right' },
{ field: 'company', visible: false }
],
exporterLinkLabel: 'get your csv here',
exporterPdfDefaultStyle: {fontSize: 9},
exporterPdfTableStyle: {margin: [30, 30, 30, 30]},
exporterPdfTableHeaderStyle: {fontSize: 10, bold: true, italics: true, color: 'red'},
exporterPdfOrientation: 'portrait',
exporterPdfPageSize: 'LETTER',
exporterPdfMaxGridWidth: 500,
exporterHeaderFilter: function( displayName ) {
if( displayName === 'Name' ) {
return 'Person Name';
} else {
return displayName;
}
},
exporterFieldCallback: function( grid, row, col, input ) {
if( col.name == 'gender' ){
switch( input ){
case 1:
return 'female';
break;
case 2:
return 'male';
break;
default:
return 'unknown';
break;
}
} else {
return input;
}
},
onRegisterApi: function(gridApi){
$scope.gridApi = gridApi;
}
};
$http.get('/data/100.json')
.success(function(data) {
data.forEach( function( row, index ) {
if( row.gender === 'female' ){
row.gender = 1;
} else {
row.gender = 2;
}
});
$scope.gridOptions.data = data;
});
$scope.export = function(){
if ($scope.export_format == 'csv') {
var myElement = angular.element(document.querySelectorAll(".custom-csv-link-location"));
$scope.gridApi.exporter.csvExport( $scope.export_row_type, $scope.export_column_type, myElement );
} else if ($scope.export_format == 'pdf') {
$scope.gridApi.exporter.pdfExport( $scope.export_row_type, $scope.export_column_type );
};
};
}])
.filter('mapGender', function() {
return function( input ) {
switch( input ){
case 1:
return 'female';
break;
case 2:
return 'male';
break;
default:
return 'unknown';
break;
}
};
});
HTML will look like
<div ui-grid="gridOptions" ui-grid-selection ui-grid-exporter ui-grid-move-columns class="grid"></div>
这篇关于如何将数据表导出为csv文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
