如何将包含逗号的 html 表格数据导出到 .csv 文件？

问题描述 投票：0回答：2

我正在使用以下 将 HTML 表数据导出为 CSV 作为起点，但我的问题是，如果 html 数据中的数据包含逗号，会发生什么。我应该在 

csv.push(row.join(","));
中放入什么，以便带逗号的数据不会被推送到下一列？

这是我正在使用的代码：

            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>

javascript html csv
2个回答
2
投票

当您获得内部文本时，请用引号将内容括起来。这将防止 CSV 将逗号读取为分隔符，而是将其保留为单个单元格。

下面是上面的代码，我刚刚删除了 FORM 元素，以便您可以在此处实际运行它。

线路变更：

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

或者使用模板字符串使其更清晰：

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>

0
投票

您可以传递表格组件以将表格导出为 CSV。 

const downloadTableAsCSV = (table, filename) => {
    const csv = Array.from(table.find('tr')).reduce((acc, row) => {
        const cols = Array.from($(row).find('td, th'));
        const rowData = cols.map((col) => `"${$(col).text().trim()}"`);
        acc.push(rowData.join(','));
        return acc;
    }, []);

    const csvContent = `data:text/csv;charset=utf-8,${csv.join('\n')}`;
    const encodedUri = encodeURI(csvContent);
    const link = document.createElement('a');
    link.setAttribute('href', encodedUri);
    link.setAttribute('download', filename);
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
};

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.