javascript - HTML/JS 表单无法正确导入/导出 txt-6ren

javascript - HTML/JS 表单无法正确导入/导出 txt

转载作者：行者123 更新时间：2023-12-04 11:11:36

问题
概括
为离线使用而设计的 HTML 表单无法正确导出/导入数据。有没有对菜鸟友好的解决方案？
细节
此表单的设计目的是让用户可以打开 HTML 表单、填写表单并将数据导出为 pip 分隔的 .txt 文件。
它可以导入/导出名称、性别和城市等各种字段。但是，它不能导入/导出小吃偏好和晚餐偏好。在我们的数据集中，这意味着成员“贪婪的小猫”将被提供汤而不是鸟，以及奶酪(不需要的)。
初始表单为空:

您可以填写表格并单击“将数据保存到文件”按钮:

但是，当您使用“选择文件”按钮导入相同的数据时，条目会混淆:

代码
Encodedna代码已被重新调整以适应问题。它由三个部分组成:

HTML 表单

数据导出版 block

数据导入专区

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Offline Form 0.1</title>
</head>

<body>

    <div>
        <input type="file" name="inputfile" id="inputfile">
    </div>

<fieldset>
<legend>Elite Club Member</legend>

        <!-- Static -->
        <b>Name:</b>
        <div id="Name"></div>
        <b>DoB:</b>
        <input type="date" id="DoB"/><br>

        <!-- dropdown, prefilled -->
        <b>Gender:</b>
        <select id="Gender" name="Gender">
            <option value="Male">Male</option>
            <option value="Female">Female</option>
            <option value="Other">Other</option>
        </select>
        <br>

        <!-- prefilled, but editable-->
        <b>City:</b>
        <input type="text" id="City"/><br>
</fieldset>

<!-- PROBLEM -->
<fieldset>
<legend>Snack Preferences</legend>

    <input type="checkbox" id="cheeseLover" name="cheeseLover">Member loves cheese.
    <br>

    <input type="checkbox" id="milkLover" name="milkLover">Member loves milk.
    <br>
</fieldset>

<!-- PROBLEM -->
<fieldset>
<legend>Dinner Preference</legend>

    <ol>
        <li>
            <legend>Choose among the various dinner options</legend>
            <p><label> <input type="radio" id="dinnerPizza" name="dinnerOptions" value="dinnerPizza">Pizza</label></p>
            <p><label> <input type="radio" id="dinnerSalad" name="dinnerOptions" value="dinnerSalad">Salad</label></p>
            <p><label> <input type="radio" id="dinnerBird" name="dinnerOptions" value="dinnerBird">Bird</label></p>
            <p><label> <input type="radio" id="dinnerSoup" name="dinnerOptions" value="dinnerSoup">Soup</label></p>
        </li>
    </ol>
</fieldset>

<!-- Save button -->
<div>
  <input type="button" id="bt" value="Save data to file" onclick="saveFile()" />
</div>

    <script type="text/javascript">
        document.getElementById('inputfile').addEventListener('change', function() {

            var fr=new FileReader();
            fr.onload=function(){
                var output_data=fr.result;
                var output_data_lines = output_data.split('\n');

                for(var i = 0; i < output_data_lines.length; i++){

                        <!-- Patient Info -->
                        if (output_data_lines[i].split('|')[0] == 'Name') {
                            document.getElementById('Name').textContent = output_data_lines[i].split('|')[1];
                        }
                        else if (output_data_lines[i].split('|')[0] == 'DoB') {
                            document.getElementById('DoB').value = output_data_lines[i].split('|')[1];
                        }
                        else if (output_data_lines[i].split('|')[0] == 'Gender') {
                            document.getElementById('Gender').value = output_data_lines[i].split('|')[1];
                        }

                        <!-- Extra Info -->
                        else if (output_data_lines[i].split('|')[0] == 'City') {
                            document.getElementById('City').value = output_data_lines[i].split('|')[1];
                        }

                        <!-- PROBLEM -->
                        <!-- Snack Preference -->
                        else if (output_data_lines[i].split('|')[0] == 'cheeseLover') {
                            document.getElementById('cheeseLover').checked = output_data_lines[i].split('|')[1];
                        }
                        else if (output_data_lines[i].split('|')[0] == 'milkLover') {
                            document.getElementById('milkLover').checked = output_data_lines[i].split('|')[1];
                        }

                        <!-- PROBLEM -->
                        <!-- Dinner Preferences -->
                        else if (output_data_lines[i].split('|')[0] == 'dinnerPizza') {
                            document.getElementById('dinnerPizza').checked = output_data_lines[i].split('|')[1];
                        }
                        else if (output_data_lines[i].split('|')[0] == 'dinnerSalad') {
                            document.getElementById('dinnerSalad').checked = output_data_lines[i].split('|')[1];
                        }
                        else if (output_data_lines[i].split('|')[0] == 'dinnerBird') {
                            document.getElementById('dinnerBird').checked = output_data_lines[i].split('|')[1];
                        }
                        else if (output_data_lines[i].split('|')[0] == 'dinnerSoup') {
                            document.getElementById('dinnerSoup').checked = output_data_lines[i].split('|')[1];
                        }
                }
            }
            fr.readAsText(this.files[0]);
        })
    </script>


    <!-- import data -->
    <script>
        let saveFile = () => {

            // Get the data from each element on the form.

            <!-- Elite Member Info -->
            const Name                                      = document.getElementById('Name').textContent;
            const DoB                                       = document.getElementById('DoB').value;
            const Gender                                    = document.getElementById('Gender').value;
            const City                                      = document.getElementById('City').value;

            <!-- PROBLEM -->
            <!-- Snack Preferences -->
            const cheeseLover                               = document.getElementById('cheeseLover').checked;
            const milkLover                                 = document.getElementById('milkLover').checked;

            <!-- PROBLEM -->
            <!-- Dinner Preferences -->
            const dinnerPizza                               = document.getElementById('dinnerPizza').checked;
            const dinnerSalad                               = document.getElementById('dinnerSalad').checked;
            const dinnerBird                                = document.getElementById('dinnerBird').checked;
            const dinnerSoup                                = document.getElementById('dinnerSoup').checked;

            // This variable stores all the data.
            let data =
                'Name|'                                     + Name + '\n' +
                'DoB|'                                      + DoB + '\n' +
                'Gender|'                                   + Gender + '\n' +
                'City|'                                     + City + '\n' +

                'cheeseLover|'                              + cheeseLover + '\n' +
                'milkLover|'                                + milkLover + '\n' +

                'dinnerPizza|'                              + dinnerPizza + '\n' +
                'dinnerSalad|'                              + dinnerSalad + '\n' +
                'dinnerBird|'                               + dinnerBird + '\n' +
                'dinnerSoup|'                               + dinnerSoup
                ;


            // Convert the text to BLOB.
            const textToBLOB = new Blob([data], { type: 'text/plain' });
            const sFileName = 'formData.txt';      // The file to save the data.

            let newLink = document.createElement("a");
            newLink.download = sFileName;

            if (window.webkitURL != null) {
                newLink.href = window.webkitURL.createObjectURL(textToBLOB);
            }
            else {
                newLink.href = window.URL.createObjectURL(textToBLOB);
                newLink.style.display = "none";
                document.body.appendChild(newLink);
            }
            newLink.click();
        }
    </script>

</body>
</html>

最佳答案

这是字符串/ bool 解析的问题。
这是您当前代码的示例:

document.getElementById('milkLover').checked = output_data_lines[i].split('|')[1];

这有效地转化为这一点，这是不正确的:

document.getElementById('milkLover').checked = 'false';

应该是这个，一个 bool 值:

document.getElementById('milkLover').checked = false;

'checked' 属性正在寻找一个 bool 值，但您传递的是一个字符串。任何不是 0、false 或对持有其中任何一个的对象的引用都将自动传递为 true。您需要将输入从字符串解析为 bool 值。您可以使用类似这样的方法非常简单地做到这一点(据我所知，这是在 Javascript 中将字符串解析为 bool 值的唯一方法):

var isTrueSet = (output_data_lines[i].split('|')[1] === 'true');
document.getElementById('milkLover').checked = isTrueSet;

如果您使用此临时变量将所有字符串解析为复选框或单选字段的每个“if”语句中的 bool 值，您的代码将完美运行 - as seen here

关于javascript - HTML/JS 表单无法正确导入/导出 txt，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/68124008/

文章推荐： javascript - 通过渐进式网络应用在移动设备上打开相机

文章推荐： python - 在 Python 中寻找片状测试的根本原因

powershell - Powershell-导出-CSV外循环，仅最后一行被打印/导出
是否可以调整此代码以导出foreach循环外的所有行: 这工作正常(内部循环): $vms = Get-VM | Where { $_.State –eq ‘Running’ } | Select-
webpack - 导出 webpack 包/前置模块。导出？避免节点中的空对象？
我试图将我的 bundle.js 引入我的 Node 服务器，但显然 webpack 包在顶部的所有包代码之前缺少一个 module.exports =。我可以手动将 module.exports
Android库项目——导出
我有一个 android 项目，其中包含一个库项目。在这个库项目中，我包含了许多可绘制对象和动画。问题是，当我将主项目导出为 .apk 时，它包括所有可绘制对象和动画，甚至是主项目中未使用的对象。
导出/导入后Mysql时间卡住
我的一个 mysql 用户以这种方式耗尽了他的生产数据库: 他将所有数据导出到转储文件，然后删除所有内容，然后将数据导入回数据库。他从 Innodb 大表空间中保存了一些 Gig(我不知道他为什么这样
Pimcore 导入/导出
我正在 pimcore 中创建一个新站点。有没有办法导出/导入 pimcore 站点的完整数据，以便我可以导出 xml/csv 格式的 pimcore 数据进行必要的更改，然后将其导入回来？最佳答案
静态函数的 DLL 导出
我有以下静态函数: static inline HandVal StdDeck_StdRules_EVAL_N( StdDeck_CardMask cards, int n
找不到 TypeScript 导出
因为我更新了 angular cli 和 nestjs 版本，所以我收到了数百条警告，提示我无法找到我的自定义类型定义和接口(interface)。但是我的nestjs api仍然可以正常工作。我正
Eclipse - 导出/保存搜索结果
Eclipse 的搜索结果 View 以其树状结构非常方便。有没有办法将这些结果导出为可读的文本格式或将它们保存到文件中以备后用？我试过使用复制和粘贴，但生成的文本格式远不可读。最佳答案不，我认
javascript - 我如何在React中选择导入/导出
我想在用户在 Chrome 中打开页面时使用 WebP否则它应该是 png。我找到了这段代码: var isChrome = !!window.chrome && !!window.chrome.w
azure - 用户上次登录 - 导出
您好，我正在尝试根据“上次登录”导出 AD 用户列表我已经使用基本 powershell 编写了脚本，但是如果有人可以使用“AzureAD 到 Powershell” 命令找到解决方案，我会很感兴趣
amcharts - 导出 AM 股票图表
有没有办法启用 Stockchart 的导出？我知道这对于普通图表是可行的，但对于股票图表，当尝试启用导出模式时，我得到了未定义，我尝试过:chart.export.enabled=true;和ch
Magento 订单导入/导出
已关闭。此问题不符合Stack Overflow guidelines 。目前不接受答案。要求我们推荐或查找工具、库或最喜欢的场外资源的问题对于 Stack Overflow 来说是偏离主题的，因为
Oracle 使用命令行导入/导出
我正在尝试学习如何使用命令行将数据导入/导出到 Oracle。根据我的发现，看起来我应该使用 sqlldr.exe 文件来导入和导出，但我不确定除了 userid 之外还需要什么参数。谁能给我解释一下
azure - 用户上次登录 - 导出
您好，我正在尝试根据“上次登录”导出 AD 用户列表我已经使用基本 powershell 编写了脚本，但是如果有人可以使用“AzureAD 到 Powershell” 命令找到解决方案，我会很感兴趣
Django pdf 导出
我想生成一个 PDF，它将以表格格式显示查询集的输出，例如: query = ModelA.objects.filter(p_id=100) class ModelA(models.Model):
Java2Word 导出，单独格式化表格单元格
我有一个数据库代理，可以从 IBM Notes 数据生成 Word 文档。我正在使用 Java2Word API 来实现此目的，但不幸的是，该 API 几乎没有文档，而且我找不到任何有关表格格式(大小
Java 导出 - 文本文件
我尝试将 Java 程序从 Eclipse 导出到 .jar 文件，但遇到了问题。它运行良好，但由于某种原因它没有找到它应该从中获取数据的文本文件。如果有人能帮忙解决这个问题，我将非常感激。最佳答案
Oracle 使用命令行导入/导出
我正在尝试学习如何使用命令行将数据导入/导出到 Oracle。根据我的发现，看起来我应该使用 sqlldr.exe 文件来导入和导出，但我不确定除了 userid 之外还需要什么参数。谁能给我解释一下
clang - 在Web程序集中生成内存和表导入/导出
使用LLVM / Clang编译到WebAssembly的默认代码生成将导出内存，并完全忽略表。使用clang（--target=wasm32-unknown-unknown-wasm）定位Web组
Oracle DDL 导出
我正在尝试在 HSQL 数据库中重新创建一个 oracle 数据库。这是为了在本地开发人员系统上进行更好的单元测试。我需要知道的是，是否有任何我可以在 oracle 服务器/客户端中使用的工具/命

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - HTML/JS 表单无法正确导入/导出 txt