javascript - 用jquery导出的csv文件中的行返回字符的来源？

Question

我一直在开发一个应用程序，该应用程序上传 csv 文件，对其进行一些数学计算，然后允许用户下载它。一切都很好，但有一个烦人的错误我正在努力解决。

文件上传到一个 html 表，并在末尾添加一列新的复选框。现在不用担心这个。 (稍后我可能会对此有疑问。)您可以上传任何 csv 文件(仅带逗号的文本，不带引号)，然后单击导出 csv 文件链接。在某些文本编辑器中查看您拥有的新文件时，其中有一个不属于的换行符。它发生在最后一个 td 的第二行。

这是一个 fiddle我做了这个演示 Action 。

当我查看控制台中的代码时，它看起来像这样:

<tr>
<td>Text1</td>
<td>text2</td>
<td>text3>
</td>

但所有其他 td 都工作正常。大家对此有什么想法吗？

谢谢!

Answer 1

由于您迫切需要 HTML 模板解决方案(至少)，我将引导您走向正确的方向。

以下取决于gkindel/CSV-JS用于 CSV 解析和 Handlebars用于 HTML 创建:

$(function () {
    var csvTemplateSrc = $('#csvTemplate').html(),
        csvTemplate = Handlebars.compile(csvTemplateSrc);

    $("#upload").click(function () {
        var filename = $("#fileUpload").val().toLowerCase(),
            reader;

        if (typeof (FileReader) === "undefined") {
            alert("This browser does not support HTML5.");
            return;
        }

        if (!/^[a-zA-Z0-9\s_\\.:-]+\.(csv|txt)$/.test(filename)) {
            alert("Please upload a valid CSV file.");
            return;
        }
        
        reader = new FileReader();
        reader.onload = function (e) {
            var rows;
            try {
                rows = CSV.parse(e.target.result);
            } catch (ex) {
                alert("Your CSV is has errors.\n\n" + ex.message);
                return;
            }
            $("#dvCSV").html(csvTemplate(rows));
        };
        reader.readAsText($("#fileUpload")[0].files[0]);
    });
    
    $(".export").click(function (event) {
        exportTableToCSV($('#dvCSV>table'), 'export.csv');
        $('a.export').css({"background-color": "#ddd"});
    });
});

Handlebars.registerHelper('first', function(context, options) {
    return options.fn(context[0]);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/gkindel/CSV-JS/master/csv.js"></script>
<script src="https://cdn.jsdelivr.net/handlebarsjs/3.0.0/handlebars.min.js"></script>

<input type="file" id="fileUpload" />
<input type="button" id="upload" value="Upload" />
<a href="#" class="export">Export Data to CSV</a>
<div id="dvCSV"></div>

<script id="csvTemplate" type="text/x-handlebars-template">
<table width="100%" class="sortable">
    {{#first .}}
    <tr width="100%">
        {{#each .}}
        <td>
            <select id="Value_{{@index}}">
                <option value="None">N/A</option>
                <option value="name">Name</option>
                <option value="Lat">Lat</option>
                <option value="Lon">Long</option>
            </select>
        </td>
        {{/each}}
        <td></td>
    </tr>
    {{/first}}
    {{#each .}}
    <tr>
        {{#each .}}
        <td>{{.}}</td>
        {{/each}}
        <td><input type="checkbox" checked></td>
    </tr>
    {{/each}}
</table>
</script>

注释

• 我认为你可以放弃文件名检查。如果 CSV 解析器成功解析文件内容，则足以证明该文件正常。
• 请注意使用 {{@index}} 创建唯一 HTML ID。您的代码创建了重复的 ID，这违背了拥有 ID 的初衷(HTML 中不允许这样做)
• 您应该考虑将整个应用程序切换到 MVVM 框架。类似 knockout 的框架处理所有 HTML 模板和 DOM 操作(您可以删除 Handlebars 和几乎所有 jQuery)，并且您也不再需要任何“将 HTML 转换为 CSV”功能。看看吧。