使用Angularjs下载csv格式

时间:2018-02-09 06:29:02

标签: mysql angularjs csv export-to-csv

节点服务:如下所示是从mysql查询获取数据的节点服务调用。并转换为json2csv格式。

function getData(req,res){
        var json2csv = require('json2csv');
        var resultset = {};
        resultset.data = [];
        var nodeExcel=require('excel-export');
        var dateFormat = require('dateformat');
        var queryString = "select name ,class ,fname from details"

     connection.query(queryString, function(err, result) {
         if(err) {
                        console.log('error ',err);
                        resultset.success=false;
                            res.writeHead(200, {
                                'Content-Type': 'application/json'
                              });
                            var resultData =resultset;
                            res.write(JSON.stringify(resultData));
                              res.end();
                    } else {
                        if(result.length>0) {
                            for(var i=0;i<result.length;i++) {
                                resultset.data[i]={};
                                var arr=_(result[i]).toArray();

                                resultset.data[i].name=arr[0]!=null?arr[0]:null;
                                resultset.data[i].class=arr[1]!=null?arr[1]:null;
                                resultset.data[i].fname=arr[2]!=null?arr[2]:null;
                            }
                            resultset.success=true;
                            res.writeHead(200, {
                                'Content-Type': 'application/json'
                              });
                            var resultData =json2csv(resultset);
                            console.log("resultData",resultData);
                            res.write(JSON.stringify(resultData));
                              res.end();
                        }   
                        else{
                            resultset.success = false;
                            res.writeHead(200, {
                                'Content-Type': 'application/json'
                            });
                            var resultData = resultset;
                            res.write(JSON.stringify(resultData));
                            res.end();
                        }
                    }
            });


    }

控制器:

获得服务响应。

$scope.Details=function(data,fileName){
    $http.get(Data.baseNodeService+'getData',headconfig).then(function(response,fileName){ 
    $scope.det = response.data.data;
    var element = angular.element('');
      var anchor = angular.element('<a/>');
     anchor.attr({
         href: 'data:attachment/csv;charset=utf-8,' + encodeURI($scope.det),
         target: '_blank',
         download: 'filename.csv'
     })[0].click();
    });
}

点击Html下载:

<input type="button" class="bt-submit" ng-click="Details()" value="Download" />

但是我将下载输出作为[object Object]。我想从我的服务调用中获取数据并以csv格式下载。

2 个答案:

答案 0 :(得分:1)

试试这个: -

/*this section for CSV*/
    if(window.navigator.msSaveOrOpenBlob && window.Blob) {
        var blob = new Blob([response.data.data], {type: "text/csv"});
        navigator.msSaveOrOpenBlob(blob, new Date().getTime() + '.csv');
    } else {
        var anchor = angular.element('<a/>').css({display: 'none'});
        angular.element(document.body).append(anchor); // Attach to document
        anchor.attr({
            href: 'data:attachment/csv;charset=utf-8,' + encodeURI(response.data.data),
            target: '_blank',
            download: new Date().getTime() + '.csv'
        })[0].click();
        anchor.remove();
    }

答案 1 :(得分:1)

您可以通过不同方式下载CSV,以下是下载文件的常用方法

var a = document.createElement('a');
 a.href = 'data:'+mimeType+';charset=utf-8;base64,' + response;
 a.target = '_blank';
 a.download = "name the file here";
 document.body.appendChild(a);
 a.click(); 

在这里使用mimeType作为你的文件类型csv它将是attachment/csv但是这肯定会在safari上工作。

有一个很棒的库https://github.com/alferov/angular-file-saver你可以使用它。

您可以将其称为

function download(api, file, contentType) {
    var d = $q.defer();
    $http({
        method: 'GET',
        url: api,
        responseType: 'arraybuffer',
        headers: {
            'Content-type': contentType
        }
    }).success(function(response) {
        var data = new Blob([response], {
            type: contentType+ ';charset=utf-8'
        });
        FileSaver.saveAs(data, file);
        d.resolve(response);
    }).error(function(response) {
        d.reject(response);
    });
    return d.promise;
}

另见文件下载的其他答案

how to export data into CSV and PDF files using angularjs

AngularJS - Receive and download CSV