Home / Questions / 55198
Accepted
lois6b
Asked: 2020-03-15 04:24:11 +0800 CST 2020-03-15 04:24:11 +0800 CST

How to process the tildes and also the delimiter in Excel?

  • 772

I made some JavaScript code that collects labelsand its associated values ​​to convert a form to a CSV.

The thing is that in the specifications I can put the type of encoding that I want, so that it treats the accents well.

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

Also, if I want it to be separated by instead of when I open it CSVwith Excel, I put it as the first line of the file and it does separate them into columns but it no longer treats the accent marks.comastabulacionesvar csvContent = "sep=,\n";

How can I have both requirements at once?


This is the code (also in 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">[email protected]</font></td></tr>


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

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

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

javascript

1 Answers

  1. Best Answer

    Instead of using encodeURIuse escape.

    simple example

    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>

    Applied to the OP's code

    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">[email protected]</font></td></tr>


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

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

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

    Reference:

    Comment by Lucky Garg on Use JavaScript to Export Your Data as CSV

    • 4