使用 Angularjs 下载 csv 格式

Question

节点服务：下图是从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 格式下载。

Answer 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();
    }

Answer 2

您可以通过不同的方式下载 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 上不起作用。

有awseome库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