2014-11-08 88 views
0

我正在使用this code将表格保存为CSV(我已将其更改为包含标题并排除隐藏行)。表格单元格内的某处换行符会丢失,但我想将其保留为\ r \ n。网上有很多类似的问题,但我仍然觉得jQuery有点神秘,不知何故我无法找到解决这个希望简单的问题的方法。如何用 r n替换所有<br />使用jQuery

function exportTableToCSV($table, delimiter) { 

    var $rows = $table.find('tr:visible'); 

    // Temporary delimiter characters unlikely to be typed by keyboard 
    // This is to avoid accidentally splitting the actual contents 
    var tmpColDelim = String.fromCharCode(11), // vertical tab character 
    tmpRowDelim = String.fromCharCode(0), // null character 

    // actual delimiter characters for CSV format 
    colDelim = '"' + delimiter + '"', 
    rowDelim = '"\r\n"', 

    // Grab text from table into CSV formatted string 
    csv = '"' + $rows.map(function (i, row) { 
     var $row = $(row), 
     $cols = $row.find('td, th'); 

     return $cols.map(function (j, col) { 
      var $col = $(col), 
      text = $col.text(); 

      return text.replace(/"/g, '""'); // escape double quotes 

     }).get().join(tmpColDelim); 

    }).get().join(tmpRowDelim) 
    .split(tmpRowDelim).join(rowDelim) 
    .split(tmpColDelim).join(colDelim) + '"', 

    // Data URI 
    csvData = 'data:application/csv;charset=utf-8,' + encodeURIComponent(csv); 
    return csvData; 
} 
+1

的jQuery没有任何字符串处理函数这样的。你应该使用普通的Javascript String.prototype.replace()方法。 – Barmar 2014-11-08 19:57:50

+1

顺便说一句,'text.replace('''''''')只会替换第一个引号,而不是所有的引号。您必须使用带'g'修饰符的正则表达式来执行多个替换。 – Barmar 2014-11-08 19:58:50

+0

谢谢,我已经改正了。 – 2014-11-10 03:16:45

回答

0

这就是br元件得到剥离:

var $col = $(col), 
    text = $col.text(); 

一个解决办法是用一个标记来代替它们,然后用\r\n替换标记:

var $col, text; 

$col = $(col).clone(); 
$col.find("br").replaceWith("<div>{{MARKER}}</div>"); 
text = $col.text().replace(/{{MARKER}}/g, "\r\n"); 

  • 克隆的元素,所以我们可以改变它在不改变文件

  • 查找其中的所有br元素

  • {{MARKER}}替换它们中的每一个div里面

  • 获取文本,其中将有{{MARKER}}其中br s曾经是

  • 替换{{MARKER}}\r\n

function exportTableToCSV($table, delimiter) { 
 

 
    var $rows = $table.find('tr:visible'); 
 

 
    // Temporary delimiter characters unlikely to be typed by keyboard 
 
    // This is to avoid accidentally splitting the actual contents 
 
    var tmpColDelim = String.fromCharCode(11), // vertical tab character 
 
    tmpRowDelim = String.fromCharCode(0), // null character 
 

 
    // actual delimiter characters for CSV format 
 
    colDelim = '"' + delimiter + '"', 
 
    rowDelim = '"\r\n"', 
 

 
    // Grab text from table into CSV formatted string 
 
    csv = '"' + $rows.map(function (i, row) { 
 
     var $row = $(row), 
 
     $cols = $row.find('td, th'); 
 

 
     return $cols.map(function (j, col) { 
 
      var $col, text; 
 
      
 
      $col = $(col).clone(); 
 
      $col.find("br").replaceWith("<div>{{MARKER}}</div>"); 
 
      text = $col.text().replace(/{{MARKER}}/g, "\r\n"); 
 

 
      return text.replace(/"/g, '""'); // escape double quotes 
 

 
     }).get().join(tmpColDelim); 
 

 
    }).get().join(tmpRowDelim) 
 
    .split(tmpRowDelim).join(rowDelim) 
 
    .split(tmpColDelim).join(colDelim) + '"', 
 

 
    // Data URI 
 
    csvData = 'data:application/csv;charset=utf-8,' + encodeURIComponent(csv); 
 
    return csvData; 
 
} 
 

 
snippet.log(exportTableToCSV($("table"), ","));
table { 
 
    border-collapse: collapse; 
 
    border: 1px solid black; 
 
} 
 
td { 
 
    border: 1px solid black; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<!-- Temporary snippet object, see http://meta.stackexchange.com/a/242144/134069 --> 
 
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script> 
 
<table> 
 
    <tbody> 
 
    <tr> 
 
     <td>Testing</td> 
 
     <td>One</td> 
 
     <td>Two and<br>three</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

+0

@TomasoAlbinoni:啊,我没意识到你没有'
' - 我已经更新了答案。 – 2014-11-09 07:42:25

+0

完美,非常感谢! – 2014-11-09 21:18:25