Json data is downloaded in csv format using javascript.
Abstract:
Recently, there is a non-project small requirement that is to document the division of labor in project development to facilitate later management and maintenance. However, during development, the division of labor is recorded in json format. Therefore, a json data is downloaded to the local device in csv format.
Code:
Copy codeThe Code is as follows:
<! DOCTYPE html>
<Html>
<Title> download csv </title>
<Head>
<Script src = "http://code.jquery.com/jquery-1.11.0.min.js"> </script>
<Script type = "text/javascript" src = "download. js"> </script>
</Head>
<Body>
<Div align = "center">
<H3> <u> Enter JSON data </u> <Div class = 'mydiv '>
<Textarea id = "txt" class = 'txtarea 'rows = "15" cols = "100"> [{"Vehicle": "BMW", "Date ": "30 Jul 2013 AM", "Location": "Hauz Khas", "Speed": 42 },{ "Vehicle": "Honda CBR", "Date ": "30 Jul 2013 AM", "Location": "Military Road", "Speed": 0 },{ "Vehicle": "suupa", "Date ": "30 Jul 2013 AM", "Location": "Sec-45", "Speed": 58 },{ "Vehicle": "Land Cruiser", "Date ": "30 Jul 2013 AM", "Location": "DLF Phase I", "Speed": 83}] </textarea>
</Div>
<Br/>
<Button class = "download"> Download CSV </button>
</Div>
</Body>
</Html>
Download. js
Copy codeThe Code is as follows:
$ (Document). ready (function (){
"Use strict ";
Var mo = {
Init: function (){
$ ('. Download'). click (function (){
Var data = $ ('# txt'). val ();
If (data = ''){
Return;
}
Mo. JSONToCSVConvertor (data, true );
});
},
JSONToCSVConvertor: function (JSONData, ShowLabel ){
Var arrData = typeof JSONData! = 'Object '? JSON. parse (JSONData): JSONData;
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 (mo. msieversion ()){
Var IEwindow = window. open ();
Iedeskdoc ument. write ('sep =, \ r \ n' + CSV );
IEwindow.doc ument. close ();
Iewindodocument.exe cCommand ('saveas', true, fileName + ". csv ");
IEwindow. close ();
} Else {
Var uri = 'data: application/csv; charset = UTF-8, '+ escape (CSV );
Var link = document. createElement ("");
Link. href = uri;
Link. style = "visibility: hidden ";
Link. download = fileName + ". csv ";
Document. body. appendChild (link );
Link. click ();
Document. body. removeChild (link );
}
},
Msieversion: function (){
Var ua = window. navigator. userAgent;
Var msie = ua. indexOf ("MSIE ");
If (msie> 0 | !! Navigator. userAgent. match (/Trident. * rv \: 11 \./) // If Internet Explorer, return version number
{
Return true;
} Else {// If another browser,
Return false;
}
Return false;
},
Main: function (){
Mo. init ();
}
};
Mo. main ();
});
Summary:
Note that the file name is the variable fileName defined in js in json format. The main problem is that it will automatically add a blank row, and each element will add a '=' before the value '.
The downloaded data format is: