如何将CSV文件导入HTML表单，以及如何将HTML表单导出到CSV文件 [英] How to import CSV file into HTML form, and export HTML form to CSV file

问题描述

尝试将CS​​V文件导入HTML表单时遇到麻烦.我希望用户能够从他们的计算机中选择一个CSV文件，当他们这样做时，它将自动为他们填写表格.同时，如果用户没有导入文件，我希望它是这样，以便他们可以将新输入的表单导出到CSV文件并将其保存到计算机中.我真的很想为此使用javascript，而不是PHP或数据库.似乎不太困难，只是不知道从哪里开始.感谢您的回答.

I'm having trouble when trying to import a CSV file into an HTML form. I want the user to be able to pick a CSV file from their computer, and when they do, it will automatically fill the form for them. At the same time, if the user didn't import a file, I'd like it to be so that they can export their newly typed form into a CSV file and save it to their computer. I would really like to use javascript for this, and not PHP or a database. It doesn't seem too difficult, just don't know where to start. Thanks for answers.

推荐答案

我认为这会让您开始.我使用 d3.js 来解析文件.

I think this will start you off. I use d3.js to parse the file.

HTML

<input id="upload" type="file">
<form id="csvForm">
    <input id="a"></input>
    <input id="b"></input>
    <input id="c"></input>
    <input id="d"></input>
</form>
<button id="download">Download</button>

JS

document.getElementById("upload").addEventListener("change", upload, false);
document.getElementById("download").addEventListener("click", download, false);

function upload(e) {
    var data = null;
    var file = e.target.files[0];

    var reader = new FileReader();
    reader.readAsText(file);
    reader.onload = function (event) {
        var csvData = event.target.result;

        var parsedCSV = d3.csv.parseRows(csvData);

        parsedCSV.forEach(function (d, i) {
            if (i == 0) return true; // skip the header
            document.getElementById(d[0]).value = d[1];
        });
    }
}

function download(e) {
    data = [["id","value"]];

    var f = d3.selectAll("#csvForm > input")[0];
    f.forEach(function(d,i){
        data.push([d.id, d.value]);
    });

    var csvContent = "data:text/csv;charset=utf-8,";
    data.forEach(function (d, i) {
        dataString = d.join(",");
        csvContent += i < data.length ? dataString + "\n" : dataString;
    });

    var encodedUri = encodeURI(csvContent);
    var link = document.createElement("a");
    link.setAttribute("href", encodedUri);
    link.setAttribute("download", "FormData.csv");
    link.click(); 
}

您的CSV的结构如下，每一行都有一个对应的输入ID:

where your CSV is structured like so, with each row having a corresponding input id:

id,value
a,red
b,blue
c,green
d,yellow

http://jsfiddle.net/rg8td0Ln/5/

这篇关于如何将CSV文件导入HTML表单，以及如何将HTML表单导出到CSV文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！