I am using the angularJS frontend framework and nodejs/express as a backend server to send and receive JSON. The backend sent a large JSON object to the frontend and I was wondering if I could download the JSON object from the frontend in CSV format.
The data is stored as json in an scope variable: $scope.data in an angular controller. Then I converted the data to a string in CSV format in the variable $scope.CSVdata. How do I get the CSVdata to download from the client browser?
I know nodejs can be set up to send a file in CSV format but it would be nice to keep the backend a clean JSON api.
Referencing this post I've thrown together quick demonstration on how this may be done using AngularJS:
JavaScript Demo (Plunker)
I've wrapped the referenced Base64 code in a service, and use it in the following way:
$scope.downloadCSV = function() {
var data = Base64.encode($scope.CSVData);
window.location.href = "data:text/csv;base64," + data;
};
There are some disadvantages to this method however as mentioned in the comments. I've pulled out some bullet points from the Wikipedia page on this subject. Head over there for the full list.
Data URIs are not separately cached from their containing documents (e.g. CSS or HTML files), therefore the encoded data is downloaded
every time the containing documents are re-downloaded.
Internet Explorer 8 limits data URIs to a maximum length of 32 KB. (Internet Explorer 9 does not have this limitation)
In IE 8 and 9, data URIs can only be used for images, but not for navigation or JavaScript generated file downloads.[7]
Base64-encoded data URIs are 1/3 times larger in size than their binary equivalent. (However, this overhead is reduced to 2–3% if the
HTTP server compresses the response using gzip)
Data URIs do not carry a filename as a normal linked file would. When saving, a default filename for the specified MIME type is
generally used.
[ . . . ]
Related
I'm working with an API for uploading a user image, the uploading process is quite simple, just choose the file from the user's device and send it as it is in a FormData (File, Binary).
But, when it comes for downloading this file from the storage, the response is really wired for me and containing some characters that because of it I can't indicate if that is a problem from the back-end handling or it's an invalid file or it's a regular formula that I didn't deal with it before.
my question is what should this data represent? And how to convert it to a file that a user can download?
here is a screenshot of it.
here
After struggling with many cases, the problem was that I didn't define the content-type within the request headers
headers: {
'Content-Type': 'blob'
}
notice that this type of data is a regular Blob file.
for downloading it, review this question JavaScript blob filename
without link
for converting it to a base64 string, review this question Convert blob to base64
I'm creating an API which should return data in a CSV format. I set the content-type header to text/csv but this forces a download of the contents as a csv file.
I'm using NodeJS and the express framework. It could be that this is standard behaviour. However I would like to know how you guys solved this issue.
This is a sample of the code that I'm using:
res.set('Content-Type', 'text/csv');
var toCsv = require('to-csv');
// obj is a just a standard JavaScript object.
res.send(toCsv(obj));
I would like that the person using the API can retrieve data in a CSV format without actually downloading a file
Maybe have a look at this question:
How does browser determine whether to download or show
It's your browser that decides that content of the type "text/csv" should be downloaded.
You should simply consider using another content-type, if you just want the csv to show in the browser as plain text.
Try this instead:
res.set('Content-Type', 'text/plain');
How can I use HTML5 local storage to save a little exe file and then download it by clicking the button?
Localstorage as you think is not a DataBase or even the File System, it's just some plain JSON files that store tiny bits of data in key: value pairs.
If you have worked with JSON before this will be very easy to grasp the Idea behind it.
Below is an example of setting and retrieving values from Local-storage:
locastorage.setItem('KEY',JSON.stringify('VALUE'));
// KEY is kind of like the variable name and the VALUE is the actual Data
JSON.parse(locastorage.getItem('KEY'));
// You use the KEY to access the value
// Using JSON methods stringify and parse just to be on the safer side.
HTML5 Localstorage is not for files.
Have a look at Mozilla's documentation here: https://developer.mozilla.org/en-US/docs/Web/API/Storage/LocalStorage
Instead it's for key/value pairs.
// Save data to the current local store
localStorage.setItem("username", "John");
// Access some stored data
alert( "username = " + localStorage.getItem("username"));
To start a download, you may want to look at a question like Download File Using Javascript/jQuery
I am having a problem integrating Couchdb and D3. D3 is a Javascript library that performs document driven data visualization. Couchdb is a document database. They were made for each other.
D3 binds an array of data to DOM elements of a web page. In most of the examples I have seen on the web or in books, people are working on a static data set. Generally, examples will show an array written into the Javascript or a text.csv file loaded into the page.
I would like to take data directly from database documents and load it into D3. I'm uncertain how to do it. I have seen one example on the web where a person has loaded all of their data as an array into one couchdb document and then brought the data into index.html with a couchdb.jquery call:
/ This function replaces the d3.csv function.
$.couch.db("d3apps3").openDoc("sp500", {
success : function (doc) {
var data = doc.data;
data.forEach(function(d) {
d.date = formatDate.parse(d.date);
d.price = +d.price;
})
I tried something similar with db.allDocs:
<script type="text/javascript">
$dbname = "dataset2";
$appname = "dataset2";
$db = $.couch.db("dataset2");
$db.allDocs({
success: function (data) {
console.log(data)
}
});
</script>
I could get the data to render in console.log, but could not get it into D3 and index.html. I also realized that the datastream resulting from db.allDocs is limited to the _id and _rev of each document.
I also tried to GET the data from a Couchdb view with a d3.json call. That wouldn't work because d3.json is looking for an existing .json file.
It's funny, I can call the view with cURL using a GET command and see the datastream, but can't seem to bind it with D3.
~$ curl -X GET http://anywhere.com:5984/dataset2/_desing/list_view/_view/arnold
{"total_rows":25,"offset":0,"rows":[
{"id":"dataset.csv1","key":"0","value":null},
{"id":"dataset.csv2","key":"1","value":null},
{"id":"dataset.csv11","key":"10","value":null},
{"id":"dataset.csv12","key":"11","value":null},
Any ideas would be appreciated.
Part four of https://gist.github.com/anonymous/9275891 has an example that I think you'd appreciate. You don't need to rely on the jquery.couchdb library at all - d3 knows enough abuot http and json to work right out the box. The relevant piece of code is:
d3.json("_view/pricetimeseries", function(viewdata) {
// We just want rows from the view in the visualisation
data = viewdata["rows"];
data.forEach(function(d) {
// the key holds the date, in seconds
d.date = new Date(d.key);
d.price = +d.value;
});
// rest of the visalisation code
HTH
If the page in which your D3 code is embedded is not served from the same domain (+ port) than CouchDB you will have to enable Cross-Origin Resource Sharing.
Assume your page is at http://example.com/data.html which contains JavaScript D3 code that acesses data from http://db.example.com/ or http://example.com:5984/. In that case your browser (which is executing the JavaScript) will by default deny such (cross-origin) requests unless the requested domain explicitly allows it.
There are basically two solutions to this:
Serve both the data and the page from the same domain, either by
putting a reverse proxy in between that maps resources to upstream servers (eg /couch to your CouchDB server and everything else to your web server)
serving your static files directly from CouchDB
or by allowing Cross-Origin Resource Sharing, which is available in CouchDB since version 1.3. You can find a list of relevant settings in the CouchDB docs on CORS.
I am using json service(.net RIA service) to push data to server from Extjs. Currently I have a requirement to upload document to server. I saw some examples using form submit to php files.
Is this possible through json service? or Is it necessery to create some server logic where i can accept form submits?
Is it possible to read some binary data from client side and push as json data to server?
In Extjs, File uploads are not performed using normal 'Ajax' techniques, that is they are not performed using XMLHttpRequests. Instead a hidden element containing all the fields is created temporarily and submitted with its target set to refer to a dynamically generated, hidden which is inserted into the document but removed after the return data has been gathered.
Be aware that file upload packets are sent with the content type multipart/form and some server technologies
check : http://docs.sencha.com/ext-js/4-1/#!/api/Ext.form.Basic-method-hasUpload
Yes it's possible. You should use FileReader to get binary base64 encoded content (FileReader.readAsDataURL(Blob|File)), which you can transfer with JSON.
More insights here: http://www.html5rocks.com/en/tutorials/file/dndfiles/