JavaScript - Mostrar CSV en el navegador.

   
Vista:

Mostrar CSV en el navegador.

Publicado por SERGIO (1 intervención) el 14/01/2014 15:52:18
Hola a todos.
Soy nuevo por estos lares y hace mas de 5 años que no programo nada, de nada...Asi que estoy oxidado pero bien, haber si algun alma caritativa me puede echar una mano.
Bueno como pongo en el titulo el problema que tengo es a la hora de mostrar el CSV desde el navegador, haciendolo con tablas en HTML. Por mas que lo intento no lo consigo...

Os pongo el codigo que he echo y que he cogido de Internet y el cual no me muestra nada.

Un saludo y gracias de antemano.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
<html>
<head>
<title>- CSV parser -</title>
</head>
<body>
 
<form>
 
<input type="file" name="F1" id="F1" size="80">
 
<input type="button" value="Read" name="B1" id="B1" onclick="execFile()">
 <input type="reset" value="Reset" name="B2" id="B2" onclick="renderArea.innerHTML=''">
</form>
<div id="renderArea"></div>
<script>
 
var renderArea=document.getElementById("renderArea");
 
function execFile(string) {
// main function to open, parse, and then render
 var myfile=document.getElementById("F1");
 
 // verify file extension (csv or not)
 if (myfile.value.match(/\.csv$/gi)==".csv") {
 // create progress window..
 var progressWindow = window.open("","","top=10,left=10,height=100,width=200");
 progressWindow.document.write("<html><head></head><body><div id='progressArea'></div></body></html>");
 var progressArea = progressWindow.document.getElementById("progressArea");
 
 // load csv file and split it line by line
 var arr = readCSV(myfile.value);
 
 // parse csv line by line
 for (var i=0;i<arr.length;i++) {
 arr[i] = parseLineCSV(arr[i]);
 progressArea.innerHTML="Parsing: "+(i+1)+" of "+arr.length;
 }
 
 // render the result into html table
 s='<table border=1>';
 for (var i=0;i<arr.length;i++) {
 s=s+'<tr>';
 for (var j=0;j<arr[i].length;j++) {
 s=s+'<td><font size="1" face="Verdana">'+arr[i][j]+'</font></td>';
 }
 progressArea.innerHTML="Table rendering: "+(i+1)+" of "+arr.length;
 s=s+'</tr>';
 }
 s=s+'</table>';
 
 // close progress window after all tasks are completed
 progressWindow.close();
 } else {
 // show this if user tries to open non csv file
 s='<b><font size="1" face="Verdana" color="#FF0000">Not a CSV file!</font></b>';
 }
 
 renderArea.innerHTML=s;
}
 
 if (typeof XMLHttpRequest == "undefined" && window.ActiveXObject) {
 function XMLHttpRequest() {
 var arrSignatures = ["MSXML2.XMLHTTP.5.0", "MSXML2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP", "Microsoft.XMLHTTP"];
 for (var i=0; i < arrSignatures.length; i++) {
 try {
 var oRequest = new ActiveXObject(arrSignatures[i]);
 return oRequest;
 } catch (oError) {
ignore
 }
 }
 throw new Error("MSXML is not installed on your system.");
 }
 }
 
function readCSV(locfile) {
// load a whole csv file, and then split it line by line
 var req = new XMLHttpRequest();
 req.open("POST",locfile,false);
 req.send("user.csv");
 return req.responseText.split(/\n/g);
}
 
function parseLineCSV(lineCSV) {
// parse csv line by line into array
 var CSV = new Array();
 
 // Insert space before character ",". This is to anticipate 'split' in IE
 // try this:
 //
  var a=",,,a,,b,,c,,,,d";
   a=a.split(/\,/g);
   document.write(a.length);
 //
 // You will see unexpected result!
 //
 lineCSV = lineCSV.replace(/,/g,",");
 
 lineCSV = lineCSV.split(/,/g);
 
 // This is continuing of 'split' issue in IE
 // remove all trailing space in each field
  for (var i=0;i
    <lineCSV.length;i++) {
  lineCSV[i] = lineCSV[i].replace(/\s*$/g,"");
  }
 
 lineCSV[lineCSV.length-1]=lineCSV[lineCSV.length-1].replace(/^\s*|\s*$/g,"");
 var fstart = -1;
 
 for (var i=0;i<lineCSV.length;i++) {
 if (lineCSV[i].match(/"$/)) {
 if (fstart>=0) {
 for (var j=fstart+1;j<=i;j++) {
 lineCSV[fstart]=lineCSV[fstart]+","+lineCSV[j];
 lineCSV[j]="-DELETED-";
 }
 fstart=-1;
 }
 }
 fstart = (lineCSV[i].match(/^"/)) ? i : fstart;
 }
 
 var j=0;
 
 for (var i=0;i
    <lineCSV.length;i++) {
 if (lineCSV[i]!="-DELETED-") {
 CSV[j] = lineCSV[i];
 CSV[j] = CSV[j].replace(/^\s*|\s*$/g,"");     // remove leading & trailing space
 CSV[j] = CSV[j].replace(/^"|"$/g,"");         // remove " on the beginning and end
 CSV[j] = CSV[j].replace(/""/g,'"');           // replace "" with "
 j++;
 }
 }
 
 return CSV;
}
 
</script>
 
 
</body>
</html>

Tambien adjunto el formato del CSV.

1
2
3
4
5
6
UserID,FName,LName,Email,Loc,Project,AccessType,Status
00001,GIGA,GOGA,giga.goga@ali.com,Denver,SETI,RW,Active
00002,FOFA,GOGA,fofa.goga@abc.com,Kansas,NASA,RO,InActive
00003,DAGA,SAGA,daga.saga@xyz.com,Denver,CERN,RO,Active
00004,HIRA,MOTI,hira.moti@ten.com,Denver,UCBL,RW,InActive
00005,UMFA,LUFA,umfa.lufa@zen.com,Parker,NASA,RW,Active


Un saludo.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder