0

I'm using the following Export HTML Table Data as CSV as a starting point, but my question is that what happens if the data within the html data contains a comma. What do I put in the csv.push(row.join(",")); so that the data with the comma is not pushed to the next column?

Here is the code that I am using:

            function exportTableToCSV(filename) {
                var csv = [];
                var rows = document.querySelectorAll("table tr");
                
                for (var i = 0; i < rows.length; i++) {
                    var row = [], cols = rows[i].querySelectorAll("td, th");
                for (var j = 0; j < cols.length; j++) 
                    row.push(cols[j].innerText);
                csv.push(row.join(","));        
                }
                // Download CSV file
                downloadCSV(csv.join("\n"), filename);
            }
            
            function downloadCSV(csv, filename) {
                var csvFile;
                var downloadLink;
                // CSV file
                csvFile = new Blob([csv], {type: "text/csv"});
                // Download link
                downloadLink = document.createElement("a");
                // File name
                downloadLink.download = filename;
                // Create a link to the file
                downloadLink.href = window.URL.createObjectURL(csvFile);
                // Hide download link
                downloadLink.style.display = "none";
                // Add the link to DOM
                document.body.appendChild(downloadLink);
                // Click download link
                downloadLink.click();
            }
            /* W3.CSS 4.13 June 2019 by Jan Egil and Borge Refsnes */
            html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}
            .w3-container:after,.w3-container:before,.w3-panel:after,.w3-panel:before,.w3-row:after,.w3-row:before,.w3-row-padding:after,.w3-row-padding:before,
            .w3-container,.w3-panel{padding:0.01em 16px}.w3-panel{margin-top:16px;margin-bottom:16px}
            table {
              font-family: arial, sans-serif;
              border-collapse: collapse;
              width: 100%;
            }

            td, th {
              border: 1px solid #dddddd;
              text-align: left;
              padding: 8px;
            }

            tr:nth-child(even) {
              background-color: white;
            }
            tr:nth-child(odd) {
              background-color: white;
            }
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
        <meta name="google" content="notranslate">        
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head> 
    <body>    
        <div class="w3-container w3-orange" >
             <h2 class="w3-animate-left">Server Table</h2>
             <form>
              <table id="bob">
                      <tr>
                        <th>Process Number</th>
                        <th>Connection String</th>
                        <th>Database Name</th>
                        <th>Table Name</th>
                        <th>Run Status</th>
                      </tr>
                      <tr>
                        <td>1</td>
                        <td>Server1,1433</td>
                        <td>tempdb</td>
                        <td>Table1</td>
                        <td>Pass</td>
                      </tr>
                      <tr>
                        <td>2</td>
                        <td>Server2,1433</td>
                        <td>tempdb</td>
                        <td>Table3</td>
                        <td>Pass</td>
                      </tr>
                    </table>
                <p></p>
            <p></p>
            <button onclick="exportTableToCSV('Server_Data.csv')">Export Results To CSV File</button>
            </form>
        </div>
</body></html>
Jeremy F.
  • 1,778
  • 11
  • 51
  • 86

1 Answers1

2

Wrap things in a quote when you are getting the inner text. This will prevent the CSV from reading the comma as a break and will instead keep it as a single cell.

Below is your code from above, I just removed the FORM element so that you can actually run it here.

Line Changed:

row.push('"' + cols[j].innerText + '"');

Or using template string to make it cleaner:

row.push(`"${cols[j].innerText}"`);


function exportTableToCSV(filename) {
                var csv = [];
                var rows = document.querySelectorAll("table tr");
                
                for (var i = 0; i < rows.length; i++) {
                    var row = [], cols = rows[i].querySelectorAll("td, th");
                for (var j = 0; j < cols.length; j++) 
                    row.push('"' + cols[j].innerText + '"');
                csv.push(row.join(","));        
                }
                // Download CSV file
                downloadCSV(csv.join("\n"), filename);
            }
            
            function downloadCSV(csv, filename) {
                var csvFile;
                var downloadLink;
                // CSV file
                csvFile = new Blob([csv], {type: "text/csv"});
                // Download link
                downloadLink = document.createElement("a");
                // File name
                downloadLink.download = filename;
                // Create a link to the file
                downloadLink.href = window.URL.createObjectURL(csvFile);
                // Hide download link
                downloadLink.style.display = "none";
                // Add the link to DOM
                document.body.appendChild(downloadLink);
                // Click download link
                downloadLink.click();
            }
/* W3.CSS 4.13 June 2019 by Jan Egil and Borge Refsnes */
            html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}
            .w3-container:after,.w3-container:before,.w3-panel:after,.w3-panel:before,.w3-row:after,.w3-row:before,.w3-row-padding:after,.w3-row-padding:before,
            .w3-container,.w3-panel{padding:0.01em 16px}.w3-panel{margin-top:16px;margin-bottom:16px}
            table {
              font-family: arial, sans-serif;
              border-collapse: collapse;
              width: 100%;
            }

            td, th {
              border: 1px solid #dddddd;
              text-align: left;
              padding: 8px;
            }

            tr:nth-child(even) {
              background-color: white;
            }
            tr:nth-child(odd) {
              background-color: white;
            }
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
        <meta name="google" content="notranslate">        
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head> 
    <body>    
        <div class="w3-container w3-orange" >
             <h2 class="w3-animate-left">Server Table</h2>
       
              <table id="bob">
                      <tr>
                        <th>Process Number</th>
                        <th>Connection String</th>
                        <th>Database Name</th>
                        <th>Table Name</th>
                        <th>Run Status</th>
                      </tr>
                      <tr>
                        <td>1</td>
                        <td>Server1,1433</td>
                        <td>tempdb</td>
                        <td>Table1</td>
                        <td>Pass</td>
                      </tr>
                      <tr>
                        <td>2</td>
                        <td>Server2,1433</td>
                        <td>tempdb</td>
                        <td>Table3</td>
                        <td>Pass</td>
                      </tr>
                    </table>
                <p></p>
            <p></p>
            <button onclick="exportTableToCSV('Server_Data.csv')">Export Results To CSV File</button>
     
        </div>
</body></html>
basic
  • 3,348
  • 3
  • 21
  • 36