如何使用 javascript 将 append HTML 表格数据转换为 doc/txt 文件

Question

I have a form with multiple inputs and drop-downs, I want to store this data (keep appending future data) into a text file.我有一个包含多个输入和下拉列表的表单，我想将此数据（继续附加未来的数据）存储到一个文本文件中。 I don't wish to use PHP or any other language.我不想使用 PHP 或任何其他语言。

I need to fetch back this data later probably into excel, so storing it in json would be a possible approach.我需要稍后将这些数据取回可能到 excel 中，因此将其存储在 json 中是一种可能的方法。

Please guide me on how to do this, I am a beginner in javascript, also suggest if any better approach is possible using just javascript (vanilla).请指导我如何做到这一点，我是 javascript 的初学者，还建议仅使用 javascript（香草）是否有更好的方法。

Answer 1

Hi i've built a fully working example using vanilla javascript for you.嗨，我已经为您使用香草 javascript 构建了一个完整的工作示例。 In this example there is a form with 3 fields.在此示例中，有一个包含 3 个字段的表单。 and a submit button.和一个提交按钮。 When the submit is clicked the function handle submit is invoked.单击提交时，将调用 function 句柄提交。 Than a blob file is created with the desired text.然后使用所需的文本创建一个 blob 文件。 And it automatically downloads the file.它会自动下载文件。

<html>
    <head>
        <script>
            function makeFile(text) {
                var newFile = new Blob(text.split(), { type: 'text/plain' })
                var newFileUrl = window.URL.createObjectURL(newFile);
                var link = document.getElementById('submit');
                link.href = newFileUrl;
                link.download = true;
            }

            var handleSubmit = () => {
                var field1 = document.getElementById('field1').value
                var field2 = document.getElementById('field2').value
                var field3 = document.getElementById('field3').value

                makeFile(`${field1},${field2},${field3}`);
            }

        </script>
    </head>

    <body>
        <form id="form1">
            <div>
                <span>field1:</span>
                <input type="text" id='field1' />
            </div>
            <div>
                <span>field2:</span>
                <input type="text" id='field2' />
            </div>
            <div>
                <span>field3:</span>
                <input type="text" id='field3' />
            </div>
        </form>
        <a href="#" download id="submit" onclick="handleSubmit()">Submit</a>
    </body>
</html>

如何使用 javascript 将 append HTML 表格数据转换为 doc/txt 文件

问题描述

1 个解决方案

解决方案1
0 2020-05-25 11:26:59

如何使用 javascript 将 append HTML 表格数据转换为 doc/txt 文件

问题描述

1 个解决方案

解决方案1 0 2020-05-25 11:26:59

解决方案1
0 2020-05-25 11:26:59