Export value with Linebreaks into single cell in Excel. jQuery Datatables

psycho picture psycho · Apr 13, 2015 · Viewed 11k times · Source

I am successfully exporting HTML tables from a web application to excel using jQuery DataTables. However one particular column has values containg line breaks and tabs. I have managed to display the data correctly on the HTML table by replacing new lines (\n) and tabs (\t) with <br> and &nbsp;(x5) respectively.

The issue is when exporting to excel i need to have the line breaks back in but keep all the value in one cell.

here is my jquery code:

    $('#papercliptable').dataTable({
    "sDom": 'T<"clear">lfrtip',
    "tableTools": {
        "aButtons": [{
            "sExtends": "xls",
            "sButtonText": "Excel",
            "fnCellRender": function (sValue, iColumn, nTr, iDataIndex) {
                console.log("sValue = " + sValue);
                console.log("iColumn = " + iColumn);
                return sValue.replace(/<br\s*\/?>/ig, "\r\n");
            },
            "sNewLine": "\r\n"
        }, {
            "sExtends": "print",
            "sMessage": "Metrics"
        }]
    }
});

Credit: post

It does not seem to work for me. All value goes to single cell but not with new line characters.

Any help would be greatly appreciated. Thanks

Tried using:

return sValue.replace(/<br\s*\/?>/ig, "\x0B");

produces the following enter image description here

Answer

Axel Richter picture Axel Richter · May 3, 2015

Let's have a complete example.

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">

  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css">
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/tabletools/2.2.4/css/dataTables.tableTools.css">

  <script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
  <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/tabletools/2.2.4/js/dataTables.tableTools.min.js"></script>

  <script type="text/javascript" language="javascript" class="init">
   $(document).ready(function() {
    $('#papercliptable').DataTable( {
     dom: 'T<"clear">lfrtip',

     tableTools: {
      "sSwfPath": "/copy_csv_xls_pdf.swf",
      "aButtons": [{
       "sExtends": "xls",
       "sFileName": "test.csv",
       "fnCellRender": function (sValue, iColumn, nTr, iDataIndex) {
         console.log("sValue = " + sValue);
         console.log("iColumn = " + iColumn);
         re = /<br\s*\/?>/i;
         if (re.test(sValue)) {
          return '"' + sValue.replace(/<br\s*\/?>/ig, "\n") + '"';
         } else {
          return sValue;
         }
        }
      }]
     }
    });
   });
  </script>

</head>

<body>
<table id="papercliptable">
 <thead>
  <tr>
   <th>A</th>
   <th>B</th>
   <th>C</th>
   <th>D</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>12345</td>
   <td>Value1</td>
   <td>Value2</td>
   <td>This<br/>is<br/>a<br/>test.</td>
  </tr>
 </tbody>
</table>
</body>
</html>

Note, you have to have the copy_csv_xls_pdf.swf within your own domain. You can download it from: https://cdn.datatables.net/tabletools/2.2.4/

This works for me and produces:

CSV:

A   B   C   D
12345   Value1  Value2  "This
is
a
test."

Note, the spaces between the columns are horizontal tabs "\t" 0x09.

Excel:

enter image description here

Note, this is the result in Excel if the *.csv is opened via File - Open. The Text Import Wizard can't handle line breaks within cells in correct manner.