我使用以下将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>在获取内部文本时，请用引号将内容引起来。这将防止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>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句