Question

所以我正在制作一个网站，其中一个我需要工作的核心功能是让网页导出一个包含我所拥有表格中所有内容的世俗.txt文件。
一旦有效，我还需要弄清楚如何将相同的文件导入网站，并让它自动填入文本框。

我该怎么做呢？

Answer 1

您的问题很广泛，并没有显示您的大量研究工作。这是一个很好的形式，当你遇到问题然后来到这里，而不是只是让我们为你解决问题。尽管如此，我还是会给你一些指示。：）

我最近要求制作一个按钮来下载div的内容。我做了gist以供将来参考。你可以根据自己的目的调整它。

基本上我所做的就是将一个点击处理程序分配给标记为＆＃39;下载＆＃39;的HTML按钮。单击该按钮时，我在页面上创建一个临时锚元素，并将其href设置为div的内容，然后以编程方式单击锚点以触发下载，最后从页面中删除临时锚点。使用不同的方法可以避免Internet Explorer的后备。我不久前在SO答案中修改了这段代码。

var downloadButton = document.getElementById('downloadButton');
downloadButton.addEventListener('click', function () {

//get the contents of the div
var contents = document.getElementById('someDiv').innerHTML;

    if (contents.length = 0) {
        return;
    }

    var filename = 'some-filename.txt';

    if (navigator.msSaveBlob) { // IE
        navigator.msSaveBlob(new Blob([contents], { type: 'text/plain;charset=utf-8;' }), filename);
    } else {
        var link = document.createElement('a');
        link.setAttribute('download', filename);
        link.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(contents));
        document.body.append(link);
        link.click();
        document.body.removeChild(link);
    }
});

关于您的下一个要求，上传文件并导入数据，我会引导您转到HTML5 Rocks - file handling tutorial。

我刚刚对快速文件上传器进行了破解，并将文件内容转储到控制台。相反，您可以解析文件内容并根据需要将数据添加回表单元素。这是我的测试代码：

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title>Test Page</title>

    <script>
        function handleFileSelect(evt) {
            var files = evt.target.files; // FileList object

            // Loop through the FileList
            for (var i = 0; i < files.length; i++) {

                var reader = new FileReader();

                // when the file has been read, print the contents to the console
                reader.onloadend = function (evt) {
                    if (evt.target.readyState == FileReader.DONE) {
                        console.log(evt.target.result);
                    }
                };

                var text = reader.readAsText(files[i]);
            }
        }

        document.addEventListener('DOMContentLoaded', function () {
            document.getElementById('files').addEventListener('change', handleFileSelect, false);
        });

    </script>

</head>

<body>

    <input type="file" id="files" name="files[]" multiple />

</body>

</html>

在html中导出.txt文件，然后导入它

1 个答案: