Angular 在浏览器上下载 csv 文件

Question

我有像

一样发送 csv 字符串的 Rest API

"aa,bb\n cc,dd"

这里是休息服务代码：

@GET
    @Path("/getCsv")
    @Produces({"text/csv"})
    public String getCSV(   ) {
        return "aa,ba,\n,ac,da";    
    }

在用户界面方面

获取请求代码的Angular资源代码如下：

angular.module('csvHelper', ['ngResource','configuration']).factory('csvHelper', function($resource,$rootScope){
            return $resource(URL+'/api/getCsv/', {}, { 
                query: {method:'GET', params:{}, cache :true}
            });
            });

发出get请求并生成csv的代码如下

csvHelper.query({}, function(response) {
                 def.resolve(response);  
                 },function(response) {
                 def.reject(response);  
                 });

           var prom = def.promise;
            prom.then(function(text) {              
                $window.open("data:text/csv;charset=utf-8," + encodeURIComponent(text));            
            }, function(error) {
                    console.log('promise failed', error);
            });

在网络选项卡中，我看到其余 API 正确发送数据：

   "aa,ba,\n,ac,da"

但是当我下载 csv 文件时，我看到里面有

[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

我做错了什么。

编辑

我厌倦了在控制台上打印响应，这就是我所看到的：

[e { 0="a",  $get=function(),  $save=function(),  more...}, e { 0="a",  $get=function(),  $save=function(),  more...}, e { 0=",",  $get=function(),  $save=function(),  more...}, e { 0="b",  $get=function(),  $save=function(),  more...}, e { 0="a",  $get=function(),  $save=function(),  more...}, e { 0=",",  $get=function(),  $save=function(),  more...}, e { 0="\n",  $get=function(),  $save=function(),  more...}, e { 0=",",  $get=function(),  $save=function(),  more...}, e { 0="a",  $get=function(),  $save=function(),  more...}, e { 0="c",  $get=function(),  $save=function(),  more...}, e { 0=",",  $get=function(),  $save=function(),  more...}, e { 0="d",  $get=function(),  $save=function(),  more...}, e { 0="a",  $get=function(),  $save=function(),  more...}]

编辑 2

我将逻辑更改为像这样使用 $http：

$http.get("http://myurl.com/api/getcsv")
              .success(function (response) {console.log(success)});

我在控制台上看到了成功，但没有看到弹出窗口。

当我在浏览器中点击http://myurl.com/api/getcsv 时，我看到弹出下载文件的窗​​口。

我错过了什么

编辑 3

这个改变奏效了。

 $http.get(compiledUrl).then(function (response) {               
                          $window.open("data:text/csv;charset=utf-8," + encodeURIComponent(response.data));                             
                  },function(response){
                      console.log("error");                  
                  });   

Answer 1

你可以使用两个自定义函数

1

function JSONToCSVConvertor(JSONData,ShowLabel) {    
  var arrData = typeof JSONData != 'object' ? JSON.parse(JSONData) : 
SONData;   
 var CSV = '';       
if (ShowLabel) {     
var row = "";
 for (var index in arrData[0]) {
     row += index + ',';
 }
 row = row.slice(0, -1);
 CSV += row + '\r\n';
  }
  for (var i = 0; i < arrData.length; i++) {
 var row = "";
 for (var index in arrData[i]) {
    var arrValue = arrData[i][index] == null ? "" : '="' + arrData[i][index] + '"';
    row += arrValue + ',';
 }
 row.slice(0, row.length - 1);
 CSV += row + '\r\n';
  }
  if (CSV == '') {        
 growl.error("Invalid data");
 return;
  }   
  var fileName = "Result";
  if(msieversion()){
  var IEwindow = window.open();
  IEwindow.document.write('sep=,\r\n' + CSV);
  IEwindow.document.close();
  IEwindow.document.execCommand('SaveAs', true, fileName + ".csv");
  IEwindow.close();
  } else {
   var uri = 'data:application/csv;charset=utf-8,' + escape(CSV);
   var link = document.createElement("a");  
   link.href = uri;
   link.style = "visibility:hidden";
   link.download = fileName + ".csv";
   document.body.appendChild(link);
  link.click();
   document.body.removeChild(link);
 }
}

2

function msieversion() {
  var ua = window.navigator.userAgent; 
  var msie = ua.indexOf("MSIE "); 
  if (msie != -1 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) // If Internet Explorer, return version number 
  {
return true;
  } else { // If another browser, 
   return false;
  }    
return false; 
}

并使用上述功能获得可下载的result.csv文件

  if(data.userlog == '')
            return;
        JSONToCSVConvertor(data.userlog, true);

Answer 2

如果你只想下载 CSV 字符串，你应该使用 $http 而不是 $resource。

$resource 返回：一个资源“类”对象，其中包含用于默认资源操作集的方法，可选地扩展自定义操作。

$resource @ angularjs.org