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

如何在 Excel 中处理波浪线和分隔符？

  • 772

我制作了一些 JavaScript 代码来收集labels及其关联的值，以将表单转换为CSV.

问题是在规范中我可以输入我想要的编码类型，以便它很好地处理重音。

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

另外，如果我希望它被分隔，而不是在我CSV用 Excel打开它时，我把它作为文件的第一行，它确实将它们分成列，但它不再处理重音符号。comastabulacionesvar csvContent = "sep=,\n";

我怎样才能同时满足这两个要求？


这是代码（也在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

    而不是使用encodeURIuse escape。

    简单的例子

    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>

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


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

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

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

    参考：

    Lucky Garg 关于使用 JavaScript 将数据导出为 CSV 的评论

    • 4