Question

我有Rest API，它发送csv String，如

"aa,bb\n cc,dd"

以下是Rest Service代码：

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

在UI方面

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

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

获取请求并生成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);
            });

在网络标签中，我看到rest 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

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

$资源返回：资源＆＃34;类＆＃34;具有默认资源操作集的方法的对象，可选择使用自定义操作进行扩展。

$resource @ angularjs.org

Answer 2

您可以使用两个自定义功能

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);

Angular下载浏览器上的csv文件

2 个答案: