如何将下载后的.txt文件文本读取并在另一HTML中使用？

你可以通过HTML文件输入控件结合FileReader API实现读取本地data.txt文件的需求，下面是完整的可运行代码：

<!DOCTYPE html>
<html>
<head>
    <title>读取data.txt文件</title>
</head>
<body>
    <!-- 文件选择控件，仅允许选择txt文件 -->
    <input type="file" id="fileInput" accept=".txt">
    <!-- 用于展示读取到的内容 -->
    <div id="contentDisplay" style="margin-top: 20px; padding: 10px; border: 1px solid #ccc;"></div>

    <script>
        const fileInput = document.getElementById('fileInput');
        const contentDisplay = document.getElementById('contentDisplay');

        // 监听文件选择事件
        fileInput.addEventListener('change', function(e) {
            // 获取选中的文件
            const file = e.target.files[0];
            if (!file) return;

            // 创建FileReader实例
            const reader = new FileReader();
            
            // 文件读取完成后的回调
            reader.onload = function(event) {
                const textContent = event.target.result;
                
                // 方式1：直接展示原始文本内容
                // contentDisplay.textContent = textContent;

                // 方式2：解析成键值对后格式化展示（适配你导出的格式）
                const dataObj = {};
                // 按换行分割每一行
                const lines = textContent.split(/\r\n|\n/);
                lines.forEach(line => {
                    // 跳过空行
                    if (!line.trim()) return;
                    // 按冒号分割键和值
                    const [key, value] = line.split(':').map(item => item.trim());
                    if (key && value !== undefined) {
                        dataObj[key] = value;
                    }
                });

                // 生成格式化的HTML内容
                let displayHtml = '';
                for (const [key, value] of Object.entries(dataObj)) {
                    displayHtml += `<p><strong>${key}:</strong> ${value}</p>`;
                }
                contentDisplay.innerHTML = displayHtml;
            };

            // 以文本格式读取文件
            reader.readAsText(file);
        });
    </script>
</body>
</html>

关键说明 #

• 文件选择控件：accept=".txt"限制用户只能选择txt格式文件，避免无效文件输入
• FileReader API：浏览器原生提供的文件读取接口，支持读取本地文件内容
• 内容解析：针对你导出的key: value格式文本，通过分割换行和冒号，将内容解析为对象，再格式化展示，比原始文本更易读

内容的提问来源于stack exchange，提问作者supreme x