Question

我一直在开发一个上传csv文件的应用程序，对其进行一些数学运算，然后允许用户下载它。一切都很好，但是我尝试解决这个问题很烦人。

文件上传到html表格，新的复选框列添加到最后。现在不要关心这一点。（我以后可能会对此有疑问。）您可以上传任何csv文件（只包含带逗号的文本，无引号），然后单击导出csv文件链接。在某些文本编辑器中查看时，您拥有的新文件中包含一个不属于的换行符。它发生在最后一个td的第二行。

这里是fiddle我制作了演示动作。

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

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

但所有其他tds工作正常。有人对此有任何想法吗？

谢谢！

Answer 1

由于你在绝望需要一个HTML模板解决方案（至少），我会给你一个正确的方向。

以下内容取决于用于CSV解析的gkindel/CSV-JS和用于HTML创建的Handlebars：

$(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}}创建uniqe HTML ID。您的代码创建了重复的ID，这在一开始就无法识别ID（并且HTML中不允许这样做）

您应该考虑切换到整个应用程序的MVVM框架。像knockout这样的框架处理所有HTML模板和DOM操作（你可以删除Handlebars和几乎所有的jQuery），你也不需要任何“转换HTML到CSV”功能。看看吧。

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

1 个答案: