[英]AngularJS - Receive and download CSV
I am using a nodeJS program as a server and an AngularJS web application as the client. 我使用nodeJS程序作为服务器,使用AngularJS Web应用程序作为客户端。
To create the CSV I'm using the "express-csv" library ( https://www.npmjs.com/package/express-csv ) 要创建CSV我正在使用“express-csv”库( https://www.npmjs.com/package/express-csv )
Here is my server side code: 这是我的服务器端代码:
Defines: 定义:
var app = express();
var csv = require('express-csv');
Get code: 获取代码:
app.get('/exportDB', function(req, res){
res.csv([
["a", "b", "c"]
, ["d", "e", "f"]
]);
Here is my client side code: 这是我的客户端代码:
$http.get("http://"+$localStorage.ip+":"+$localStorage.port+"/exportDB").success(function(response){
// HERE I NEED A WAY TO DOWNLOAD THE RECEIVED CSV
});
Needless to say it reaches the server and everything else is working just fine, but I couldnt find a way to download the CSV. 不用说它到达服务器,其他一切工作正常,但我找不到下载CSV的方法。 Help please.
请帮忙。
PS PS
Please don't say it's a duplicate of Prompt a csv file to download as pop up using node.js and node-csv-parser (node module) since the client side isn't really mentioned there. 请不要说它是使用node.js和node-csv-parser(节点模块)弹出提示下载csv文件的副本,因为那里没有真正提到客户端。 Also, other questions are focused on server side instead of client.
此外,其他问题集中在服务器端而不是客户端。 There is no other question referring to AngularJS client.
没有其他问题涉及AngularJS客户端。
你可以导航:
location.href = "http://"+$localStorage.ip+":"+$localStorage.port+"/exportDB";
I faced same issue that the solutions mentioned above with works well with Chrome and Firefox, but not with safari/IE. 我遇到了同样的问题,上面提到的解决方案适用于Chrome和Firefox,但不适用于safari / IE。
Tried out following hack and it worked for me- 试图跟随黑客攻击,它对我有用 -
var url="http://'+$localStorage.ip+':"+$localStorage.port+'/exportDB'; var form = angular.element("<form action='" + url +"'></form>"); form.submit();
File download will be handled by browser itself. 文件下载将由浏览器本身处理。 though following is limitation to it -
虽然以下是限制 -
There is another approach that worked and it was - 还有另一种方法可行,它是 -
var url="http://'+$localStorage.ip+':"+$localStorage.port+'/exportDB'; $window.location.href = url;
Suggestions and Discussions welcome! 建议和讨论欢迎!
You can create a tag and click on it: 您可以创建一个标签并单击它:
$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();
});
There are ways of downloading csv. 有下载csv的方法。 First approach is to create a tag and click it
第一种方法是创建标签并单击它
Add the mimeType in below code data:application/octet-stream 在下面的代码数据中添加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();
But this solution doesn't work on IE>9 and safari>6 但是这个解决方案不适用于IE> 9和safari> 6
because safari doesn't follow download attribute for anchor tag 因为safari不遵循锚标记的下载属性
so for safari you can use filesaver.js 所以对于safari你可以使用filesaver.js
and IE this solution will work 和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");
}
Here I tried to make it simple. 在这里,我试着让它变得简单。 Assign all the back end records that you want to display in the file in the variable called obj.
将要显示的所有后端记录分配给名为obj的变量中的文件。 I will just say it as var obj = [].
我会把它说成var obj = []。 And inside the function just add the below code.
在函数内部只需添加以下代码。
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();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.