AngularJS - 接收和下载 CSV答案

【问题标题】：AngularJS - Receive and download CSVAngularJS - 接收和下载 CSV
【发布时间】：2016-08-16 00:24:41
【问题描述】：

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

为了创建 CSV，我使用了“express-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 的方法。请帮忙。

附言

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

【问题讨论】：

标签： javascript angularjs node.js csv

【解决方案1】：

你可以导航：

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

【讨论】：

它可以工作，但我得到一个名为“exportDB”的文件而没有结束。（如果我添加“.csv”就可以了）。你知道如何在发送之前在服务器中命名文件吗？
@GuyBen-Moshe 你应该设置标题res.setHeader('Content-disposition', 'attachment; filename=' + filename); res.setHeader('Content-type', mimetype);

【解决方案2】：

你可以创建一个标签并点击它：

    $http.get("http://"+$localStorage.ip+":"+$localStorage.port+"/exportDB").success(function(response) {
        var dataURI = 'data:application/octet-stream;base64,' + btoa(response);
        $('<a></a>').attr({
            download:  'db.csv',
            href: dataURI
        })[0].click();
    });

【讨论】：

【解决方案3】：

有多种下载 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>9 和 safari>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】：

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

尝试了以下 hack，它对我有用 -

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

文件下载将由浏览器自己处理。尽管以下是对它的限制 -

您将无法处理来自您的 http get 调用的错误（如果有的话）：（为此尝试使用 JavaScript 的 try-catch 块，但效果不佳...
..您将无法对这段代码进行单元测试 :( :(

还有另一种有效的方法，它是 -

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

欢迎提出建议和讨论！

【讨论】：

【解决方案5】：

在这里我试图让它变得简单。在名为 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();

【讨论】：