AngularJS - 接收和下载CSV

时间:2016-04-22 11:29:58

标签: javascript angularjs node.js csv

我使用nodeJS程序作为服务器,使用AngularJS Web应用程序作为客户端。

使用" express-csv"创建CSV。图书馆(https://www.npmjs.com/package/express-csv

这是我的服务器端代码:

定义:

var app = express();
var csv = require('express-csv');

获取代码:

app.get('/exportDB', function(req, res){
    res.csv([
    ["a", "b", "c"]
  , ["d", "e", "f"]
  ]);

这是我的客户端代码:

$http.get("http://"+$localStorage.ip+":"+$localStorage.port+"/exportDB").success(function(response){
            // HERE I NEED A WAY TO DOWNLOAD THE RECEIVED CSV
        });

不用说它到达服务器,其他一切工作正常,但我找不到下载CSV的方法。请帮助。

P.S

请不要说它是Prompt a csv file to download as pop up using node.js and node-csv-parser (node module)的副本,因为客户端并没有真正提到那里。 此外,其他问题集中在服务器端而不是客户端。 没有其他问题可以引用AngularJS客户端。

5 个答案:

答案 0 :(得分:2)

你可以导航:

location.href = "http://"+$localStorage.ip+":"+$localStorage.port+"/exportDB";

答案 1 :(得分:2)

我遇到了同样的问题,上面提到的解决方案适用于Chrome和Firefox,但不适用于safari / IE。

尝试了以下黑客攻击,它对我有用 -

var url="http://'+$localStorage.ip+':"+$localStorage.port+'/exportDB'; var form = angular.element("<form action='" + url +"'></form>"); form.submit();

文件下载将由浏览器本身处理。  虽然以下是对它的限制 -

  1. 你将无法处理你的http get调用中的错误(如果有的话):(对于这个尝试使用javascript的try-catch块,但是效果不好......
  2. ..你无法对这段代码进行单元测试:( :(
  3. 还有另一种方法可行 - 它是 -

    var url="http://'+$localStorage.ip+':"+$localStorage.port+'/exportDB'; $window.location.href = url;

    建议和讨论欢迎!

答案 2 :(得分:1)

您可以创建一个标签并单击它:

BindingSource

答案 3 :(得分:1)

有下载csv的方法。第一种方法是创建一个标签并单击它

在下面的代码数据中添加mimeType:application / octet-stream

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

但是这个解决方案不适用于IE&gt; 9和safari&gt; 6

因为safari不遵循锚标记的下载属性

因此对于safari,您可以使用filesaver.js

和IE这个解决方案将起作用

if (window.navigator.msSaveOrOpenBlob){
                // base64 string
                var base64str = response;

                // decode base64 string, remove space for IE compatibility
                var newstr =base64str.replace(/\s/g, '');
                var binary = atob(newstr);

                // get binary length
                var len = binary.length;

                // create ArrayBuffer with binary length
                var buffer = new ArrayBuffer(len);

                // create 8-bit Array
                var view = new Uint8Array(buffer);

                // save unicode of binary data into 8-bit Array
                for (var i = 0; i < len; i++) {
                 view[i] = binary.charCodeAt(i);
                }

                // create the blob object with content-type "application/csv"               
                var blob = new Blob( [view], { type: mimeType });
                window.navigator.msSaveOrOpenBlob(blob, "Name your file here");
            }

答案 4 :(得分:0)

在这里,我试图使其变得简单。在名为obj的变量中分配要显示在文件中的所有后端记录。我只是说它为var obj = []。在函数内部,只需添加以下代码。

var a = document.createElement("a");
var csvContent = "Name, Address\n";

for(var i =0; i <obj.lenght; i++ ) {
  var dataString = obj[i].name + ", " + obj[i].address + "\n";
  csvContent +=  dataString;  
}
a.href = 'data:attachment/csv;charset=utf-8,' + encodeURI(csvContent);
a.target = '_blank';
a.download = 'myFile.csv';
document.body.appendChild(a);
a.click();