4

Hice un código JavaScript que recoge labels y sus valores asociados para convertir un formulario en un CSV.

La cosa es que en las especificaciones puedo poner el tipo de codificación que quiero, para que trate bien las tildes.

link.setAttribute("href", "data:text/csv;charset=utf-8,%EF%BB%BF" + encodeURI(csvContent));

Además, si quiero que al abrir el CSV con Excel, me separe por comas en vez de tabulaciones, pongo var csvContent = "sep=,\n"; como primera linea del archivo y sí los separa en columnas pero ya no trata las tildes.

¿Cómo puedo tener ambos requisitos a la vez?



Este es el código (también en jsfiddle):

document.getElementById("download").addEventListener("click", download, false);

    

function download(e) {
    
    data = [["ColumnaNombre","ColumnaDato"]];
    
    //var f = d3.selectAll("#csvForm > input")[0];
    
    var columnaNombre = document.getElementsByClassName("ColumnaNombre");
    
    var columnaDato = document.getElementsByClassName("ColumnaDato");
    
		for (var i=0;i<columnaNombre.length;i++) {
        //grab x[i].innerHTML (or textContent or innerText)
        data.push([columnaNombre[i].innerText, columnaDato[i].nodeName=="INPUT" ? columnaDato[i].value : columnaDato[i].innerText]);
		}
    

    
    console.log(data);
    
    var csvContent = "sep=,\n"; //charset=utf-8,%EF%BB%BF";  "data:text/csv;charset=utf-8,%EF%BB%BF"
    data.forEach(function (d, i) {
        dataString = d.join(",");
        csvContent += i < data.length ? dataString + "\n" : dataString;
    });

    var encodedUri = encodeURI(csvContent);
    var link = document.createElement("a");
    link.setAttribute("href", "data:text/csv;charset=utf-8,%EF%BB%BF" +  encodeURI(csvContent));
    //link.setAttribute("href", encodedUri);
    link.setAttribute("download", "FormData.csv");
    link.click(); 
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>


<ul>
<table class="interlineado" width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody><tr valign="top"><td width="16%" bgcolor="#F7F7F7"><b><font class="ColumnaNombre" size="2" color="#008080">Matrícula:</font></b></td><td width="35%" bgcolor="#F7F7F7"><font size="2" class="ColumnaDato" color="#000080"> prueba</font></td><td width="18%" bgcolor="#F7F7F7"><b><font class="ColumnaNombre" size="2" color="#008080">Departamento:</font></b></td><td width="31%" bgcolor="#F7F7F7"><font  class="ColumnaDato" size="2" color="#000080"></font></td></tr>

<tr valign="top"><td width="16%" bgcolor="#F7F7F7"><b><font size="2" class="ColumnaNombre" color="#008080">Nombre:</font></b></td><td width="35%" bgcolor="#F7F7F7"><font  class="ColumnaDato" size="2" color="#000080">Rrhh Desarrollador 01</font></td><td width="18%" bgcolor="#F7F7F7"><b><font  class="ColumnaNombre" size="2" color="#008080">Teléfono:</font></b></td><td width="31%" bgcolor="#F7F7F7"><font size="2"  color="#000080">
<input  class="ColumnaDato" name="PetTelefono" value="985"></font></td></tr>

<tr valign="top"><td width="16%" bgcolor="#F7F7F7"><b><font size="2" class="ColumnaNombre" color="#008080">Factoría:</font></b></td><td width="35%" bgcolor="#F7F7F7"><font size="2"   class="ColumnaDato" color="#000080"></font></td><td width="18%" bgcolor="#F7F7F7"><b><font class="ColumnaNombre" size="2" color="#008080">Email:</font></b></td><td width="31%" bgcolor="#F7F7F7"><font  class="ColumnaDato" size="2" color="#000080">prueba@prueba.com</font></td></tr>


</tbody></table>
</ul>

<p id="resultado"></p>

 <button id="download">Download</button>

5
  • Puede que esto te sirva generating-csv-file-for-excel dice: If you have non-ASCII characters (encoded in UTF-8) in the file, you should have a UTF-8 BOM (3 bytes, hex EF BB BF) at the start of the file. Otherwise Excel will interpret the data according to your locale's default encoding
    – ffflabs
    el 14 mar. 2017 a las 12:50
  • @amenadiel ese EF BB BF es el que tengo tras UTF-8
    – lois6b
    el 14 mar. 2017 a las 12:53
  • En libreoffice siempre me lo reconoce como UTF8, pero no hay manera de saltarse el wizard de importación
    – ffflabs
    el 14 mar. 2017 a las 13:06
  • @amenadiel si no pongo el delimitador, las tildes me las trata bien. es cuando pongo esa primera linea (que no sale en el excel) cuando las tildes ya no se tratan pero si se separa en columnas
    – lois6b
    el 14 mar. 2017 a las 13:27
  • lois6b: Creo que es mejor usar el fragmento de código HTML/JavaScript/CSS de SOes ya que es un recurso interno en lugar de usar algo similar pero que es un recurso externo. Mas detalles en mi respuesta a una pregunta en Stack Overflow Meta en español.
    – Rubén
    el 14 mar. 2017 a las 22:21

1 respuesta 1

4

En lugar de usar encodeURI usa escape.

Ejemplo simple

document.getElementById("download").addEventListener("click", download, false);

function download(e) {
  var encoding = "data:text/csv;charset=utf-8,%EF%BB%BF";  
  csvContent = "sep=,\n";
  csvContent += "niño,niña\n";
  csvContent += "melón,sandía\n";
  var encodedUri = encodeURI(csvContent);
  var link = document.createElement("a");
  link.setAttribute("href", encoding + escape(csvContent));
  link.setAttribute("download", "FormData.csv");
  link.click(); 
}
<button id="download">Descargar</button>

Aplicado al código del OP

document.getElementById("download").addEventListener("click", download, false);

    

function download(e) {
    
    data = [["ColumnaNombre","ColumnaDato"]];
    
    //var f = d3.selectAll("#csvForm > input")[0];
    
    var columnaNombre = document.getElementsByClassName("ColumnaNombre");
    
    var columnaDato = document.getElementsByClassName("ColumnaDato");
    
		for (var i=0;i<columnaNombre.length;i++) {
        //grab x[i].innerHTML (or textContent or innerText)
        data.push([columnaNombre[i].innerText, columnaDato[i].nodeName=="INPUT" ? columnaDato[i].value : columnaDato[i].innerText]);
		}
    

    
    console.log(data);
    
    var csvContent = "sep=,\n"; //charset=utf-8,%EF%BB%BF";  "data:text/csv;charset=utf-8,%EF%BB%BF"
    data.forEach(function (d, i) {
        dataString = d.join(",");
        csvContent += i < data.length ? dataString + "\n" : dataString;
    });

    var encodedUri = encodeURI(csvContent);
    var link = document.createElement("a");
    link.setAttribute("href", "data:text/csv;charset=utf-8,%EF%BB%BF" +  escape(csvContent));
    //link.setAttribute("href", encodedUri);
    link.setAttribute("download", "FormData.csv");
    link.click(); 
}
   
    
    <ul>
<table class="interlineado" width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody><tr valign="top"><td width="16%" bgcolor="#F7F7F7"><b><font class="ColumnaNombre" size="2" color="#008080">Matrícula:</font></b></td><td width="35%" bgcolor="#F7F7F7"><font size="2" class="ColumnaDato" color="#000080"> prueba</font></td><td width="18%" bgcolor="#F7F7F7"><b><font class="ColumnaNombre" size="2" color="#008080">Departamento:</font></b></td><td width="31%" bgcolor="#F7F7F7"><font  class="ColumnaDato" size="2" color="#000080"></font></td></tr>

<tr valign="top"><td width="16%" bgcolor="#F7F7F7"><b><font size="2" class="ColumnaNombre" color="#008080">Nombre:</font></b></td><td width="35%" bgcolor="#F7F7F7"><font  class="ColumnaDato" size="2" color="#000080">Rrhh Desarrollador 01</font></td><td width="18%" bgcolor="#F7F7F7"><b><font  class="ColumnaNombre" size="2" color="#008080">Teléfono:</font></b></td><td width="31%" bgcolor="#F7F7F7"><font size="2"  color="#000080">
<input  class="ColumnaDato" name="PetTelefono" value="985"></font></td></tr>

<tr valign="top"><td width="16%" bgcolor="#F7F7F7"><b><font size="2" class="ColumnaNombre" color="#008080">Factoría:</font></b></td><td width="35%" bgcolor="#F7F7F7"><font size="2"   class="ColumnaDato" color="#000080"></font></td><td width="18%" bgcolor="#F7F7F7"><b><font class="ColumnaNombre" size="2" color="#008080">Email:</font></b></td><td width="31%" bgcolor="#F7F7F7"><font  class="ColumnaDato" size="2" color="#000080">prueba@prueba.com</font></td></tr>


</tbody></table>
</ul>

<p id="resultado"></p>

 <button id="download">Download</button>

Referencia:

Comentario de Lucky Garg en Use JavaScript to Export Your Data as CSV

1
  • 1
    Perfecto, funciona tal y como lo quería. muchas gracias ^^
    – lois6b
    el 15 mar. 2017 a las 6:58

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.