[从HTML导出数据到excel时如何防止用逗号分隔某些值

Question

我有一个小的示例表单，某些问题将在文本中包含逗号，当我将其导出到.csv文件时，我不希望将它们分隔开。无论如何，是否有一些例外用逗号分隔？例如，当找到逗号时将此表单导出到.csv时，它将创建一个新的单元格，该单元格很好，但那些在其中带有逗号的问题除外。我试图对字符进行转义和编码，但并没有帮助。感谢任何建议或代码，谢谢。

           <table>
      <tr>
        <th>Category</th>
        <th>Points Possible</th>
        <th>Points Awarded</th>
        <th>Percent Achieved</th>
        <th>Ranking</th>
      </tr>
      <tr>
        <td align="center">A</td>
        <td align="center">60</td>
        <td align="center"><b><div><span id="summary_section_a"></span></div></b></td>
        <td align="center"><b><div><span id="percent_section_a"></span></div></b></td>
        <td bgcolor="#92d050" align="center" id="rank_section_a"></td>
      </tr>
      <tr>
        <td align="center">B</td>
        <td align="center">50</td>
        <td align="center"><b><div><span id="summary_section_b"></span></div></td>
        <td align="center"><b><div><span id="percent_section_b"></span></div></td>
        <td bgcolor="#92d050" align="center" id="rank_section_b"></td>
      </tr>
      <tr>
        <td align="right"><b>Totals=</b></td>
        <td align="center"><b><div></div></b></td>
        <td align="center" id="totalNum"><b></b></td>
        <td align="center"><b><div><span id="TotalPercent"></span></div></b></td>
        <td align="center"></td>
      </tr>
    </table>
    <table>
      <th>Section A.1</th>
      <tr>
        <td>This Question, Will have, commas in, it</td>
        <td align="center"></td>
        <td align="center">
        <select id="a1" class="select section_a" onChange="calcSectionA('section_a')">
        <option value="0">0</option>
        <option value="2">2</option>
        </select>
        </td>
      </tr>
      <tr>
        <td>This Question, Will have, commas, in it</td>
        <td align="center"></td>
        <td align="center">
        <select id="a2" class="select section_a" onChange="calcSectionA('section_a')">
        <option value="0">0</option>
        <option value="2">2</option>
        </select>
        </td>
      </tr>
      <tr>
        <td>Sub Total</td>
        <td align="center"><b></b></td>
        <td align="center"><b><div id="section_a1subTotal"></div></b></td>
      </tr>
      <th>Section A.2</th>
      <tr>
        <td>Question, 1</td>
        <td align="center"></td>
        <td align="center">
        <select id="a3" class="select section_a" onChange="calcSectionA('section_a')">
        <option value="0">0</option>
        <option value="2">2</option>
        </select>
        </td>
      </tr>
      <tr>
        <td>Question, 2</td>
        <td align="center"></td>
        <td align="center">
        <select id="a4" class="select section_a" onChange="calcSectionA('section_a')">
        <option value="0">0</option>
        <option value="2">2</option>
        </select>
        </td>
      </tr>
      <tr>
        <td>Sub Total</td>
        <td align="center"><b></b></td>
        <td align="center"><b><div id="section_a2subTotal"></div></b></td>
      </tr>
      <tr>
        <td class="subtotal">Section A. Total</td>
        <td align="center"><b></b></td>
        <td align="center"><b><div id="total_section_a"></div></b></td>
      </tr>
      <th>Section B.1</th>
      <tr>
        <td>Question, 1</td>
        <td align="center"></td>
        <td align="center">
        <select id="b1" class="select section_b" onChange="calcSectionB('section_b')">
        <option value="0">0</option>
        <option value="1">1</option>
        </select>
        </td>
      </tr>
      <tr>
        <td>Question, 2</td>
        <td align="center"></td>
        <td align="center">
        <select id="b2" class="select section_b" onChange="calcSectionB('section_b')">
        <option value="0">0</option>
        <option value="1">1</option>
      </select>
        </td>
        </tr>
        <tr>
      <td>Sub Total</td>
        <td align="center"><b></b></td>
        <td align="center"><b><div id="section_b1subTotal"></div></b></td>
      </tr>
      <th>Section B.2</th>
      <tr>
        <td>Question, 1</td>
        <td align="center"></td>
        <td align="center">
        <select id="b3" class="select section_b" onChange="calcSectionB('section_b')">
        <option value="0">0</option>
        <option value="1">1</option>
      </select>
      </td>
      </tr>
      <tr>
      <td>Question, 2</td>
        <td align="center"></td>
        <td align="center">
        <select id="b4" class="select section_b" onChange="calcSectionB('section_b')">
        <option value="0">0</option>
        <option value="1">1</option>
      </select>
      </td>
      </tr>
      <tr>
        <td>Sub Total</td>
        <td align="center"><b></b></td>
        <td align="center"><b><div id="section_b2subTotal"></div></b></td>
      </tr>
      <tr class="blueHead">
        <td class="subtotal">Section B. Total</td>
        <td align="center"><b></b></td>
        <td align="center"><b><div id="total_section_b"></div></b></td>
      </tr>
    </table>

    <button onclick="exportTableToCSV('MESA.csv')">Export HTML Table To Excel File</button>
    <script>
    var sections = {
    section_a: 0,
    section_b: 0
    }

    //Calculates Section A
    function calcSectionA(section) {
    let sum = 0;
    //Queries All <Select> and looks for class = "select section_a" and add each selected option and assings it to sum
    document.querySelectorAll('select.' + section)
    .forEach((input) => {
    sum += parseInt(input.options[input.selectedIndex].value);
    });
    sections[section] = sum;
    document.getElementById('total_' + section).textContent = sum;
    document.getElementById('summary_' + section).textContent = sum
    document.getElementById('percent_' + section).textContent = Math.ceil(sum / 8 * 100) + '%';
    calcRanks();
    var a1Q1 = document.getElementById('a1').value;
    var a1Q2 = document.getElementById('a2').value;
    document.getElementById('section_a1subTotal').textContent = parseInt(a1Q1) + parseInt(a1Q2);
    var a2Q1 = document.getElementById('a3').value;
    var a2Q2 = document.getElementById('a4').value;
    document.getElementById('section_a2subTotal').textContent = parseInt(a2Q1) + parseInt(a2Q2);
    var aTotals = document.getElementById('summary_section_a').textContent;
    var bTotals = document.getElementById('summary_section_b').textContent;
    if (aTotals !== "" && bTotals !== "") {
    document.getElementById('totalNum').textContent = parseInt(aTotals) + parseInt(bTotals);
    }
    }

    //Calculates Section B
    function calcSectionB(section) {
    let sum = 0;
    //Queries All <Select> and looks for class = "select section_b" and add each selected option and assings it to sum
    document.querySelectorAll('select.' + section)
    .forEach((input) => {
    sum += parseInt(input.options[input.selectedIndex].value);
    });
    sections[section] = sum;
    document.getElementById('total_' + section).textContent = sum;
    document.getElementById('summary_' + section).textContent = sum
    document.getElementById('percent_' + section).textContent = Math.ceil(sum / 4 * 100) + '%';
    calcRanks();
    var b1Q1 = document.getElementById('b1').value;
    var b1Q2 = document.getElementById('b2').value;
    document.getElementById('section_b1subTotal').textContent = parseInt(b1Q1) + parseInt(b1Q2);
    var b2Q1 = document.getElementById('b3').value;
    var b2Q2 = document.getElementById('b4').value;
    document.getElementById('section_b2subTotal').textContent = parseInt(b2Q1) + parseInt(b2Q2);
    var aTotals = document.getElementById('summary_section_a').textContent;
    var bTotals = document.getElementById('summary_section_b').textContent;
    if (aTotals !== "" && bTotals !== "") {
    document.getElementById('totalNum').textContent = parseInt(aTotals) + parseInt(bTotals);
    }
    }



    function calcRanks() {
    let sectionsArr = [];
    let keys = Object.keys(sections);
    keys.forEach((key, i) => {
    sectionsArr.push({
    section: key,
    value: sections[key],
    rank: 0
    });
    if (i + 1 === keys.length) {
    sectionsArr.sort((a, b) => {
    return a.value > b.value ? -1 : a.value < b.value ? 1 : 0
    });
    let lastIndex = 0;
    for (let i = 1; i < sectionsArr.length; i++) {
    let section = sectionsArr[i];
    let lastSection = sectionsArr[lastIndex];
    //console.log(lastSection.value, section.value);
    if (lastSection.value > section.value) {
    sectionsArr[i].rank = lastSection.rank + 1;
    }
    if (lastSection.value === section.value) {
    sectionsArr[i].rank = lastSection.rank;
    }
    lastIndex = i;
    }
    displayRanks(sectionsArr);
    }
    });
    }

    function displayRanks(sections) {
    sections.forEach((section) => {
    document.getElementById('rank_' + section.section).textContent = section.rank + 1;
    });
    }


    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();
    }

    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++)
    {const selectElem = cols[j].querySelector('select');
    if ( selectElem ) {
    row.push(selectElem.value);
    } else {
    row.push(cols[j].innerText);
    }}

    csv.push(row.join(","));
    }

    // Download CSV file
    downloadCSV(csv.join("\n"), filename);
    }
    </script>

Answer 1

[提交表单时，您可以在将带有逗号的问题两边加上双引号。这将告诉CSV解析器问题是文本

编辑我看到您正在手动构建csv文本。不要手动构建csv文件。使用类似Jquery CSV的库。在包含value的任何元素上，请使用data-value属性将其用引号引起来，即使您不希望它带有逗号也是如此。从HTML解析数据时，请检查data-value是否存在。如果存在，则使用data-value属性中的值。

<table>
      <th>Section A.1</th>
      <tr>
        <td data-value='"This Question, Will have, commas in, it"'>This Question, Will have, commas in, it</td>
        <td align="center"></td>
        <td align="center">
        <select id="a1" class="select section_a" onChange="calcSectionA('section_a')">
        <option value="0">0</option>
        <option value="2">2</option>
        </select>
        </td>
      </tr>

解决方案2在此解决方案中，只需在解析元素之前检查data-value是否存在。如果存在数据值attr，则用双引号将文本引起来。注意：您在td元素中看到数据值属性吗？

<table>
      <th>Section A.1</th>
      <tr>
        <td data-value>This Question, Will have, commas in, it</td>
        <td align="center"></td>
        <td align="center">
        <select id="a1" class="select section_a" onChange="calcSectionA('section_a')">
        <option value="0">0</option>
        <option value="2">2</option>
        </select>
        </td>
      </tr>

解决方案3在后端创建csv文件。向服务器发送原始数据，然后使用良好的csv库。