如何读取txt文件并将其保存在html中javascript中的数组中答案

【问题标题】：How to read txt file and save it in array in javascript in html如何读取txt文件并将其保存在html中javascript中的数组中
【发布时间】：2021-01-21 04:28:35
【问题描述】：

对此有很多解决方案，但我在 html 网页上的 javascript 中发现很少或没有。我有一个名为 sample.txt 的数据文件，位于我的 html 文件所在的位置。我的目标是将 txt 文件加载到可用于创建表格并显示在 html 文件上的数组中。我的 sample.text 文件有以下数据：

 sin 0.2 time 0.22222
 cos 0.3 time 0.43434
 tan 0.1 time 0.22221

我是 Javascript 的新手，我承认它比其他编程语言更难。我熟悉 node.js 模式下的 javascript，但不熟悉 html 模式。我设法创建了 html 网页（如下所示）并在脚本模式下显示文本和数字等基础知识。我还设法在脚本模式下按下按钮后加载 txt 文件并显示它。这个 txt 加载方法是唯一对我有用的方法。 require (js) 方法不起作用也不导入。如何从这种工作模式创建数据数组？

以下是我的完整代码（已更正），

  <!DOCTYPE html>
  <html>
  <head>
  <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
  <meta content="utf-8" http-equiv="encoding">
  <title>Read Text File</title> 
  </head> 

  <body> 
  <input type="file" name="inputfile"
        id="inputfile"> 
  <br> 

  <pre id="output"></pre> 
  <script>

  var file = document.getElementById('inputfile');

  file.addEventListener('change', () => {
  var txtArr = [];
  var fr = new FileReader();
  fr.onload = function() {
    // By lines
    var lines = this.result.split('\n');
    for (var line = 0; line < lines.length; line++) {
        txtArr = [...txtArr, ...(lines[line].split(" "))];
    }
   }
  fr.onloadend = function() {
    console.log(txtArr);
    document.getElementById('output').textContent=txtArr.join("");
    document.getElementById("output").innerHTML = txtArr[1]; 
    console.log(txtArr[1]);
  }

  fr.readAsText(file.files[0]);


  })

  </script>
  </body>
  </html>

【问题讨论】：

你试过 fs.readFile 吗？你可以参考这个链接：Get data from fs.readFile
您可以控制文件格式吗？除了空白之外几乎没有数据结构使得它比它需要的更困难。您可以将其格式化为 JSON 吗？甚至是 CSV？
是的，我可以控制文件格式。 Text.txt 文件是由其他语言代码生成的，例如 c、pascal 等。我编码的目的是为少数几种编程语言开发代码，包括 javascript，用于测量每种语言进行基本数学运算的速度性能。然后比较它们。我使用 javascript 来总结结果并将其显示为学习和练习的一部分。

标签： javascript html arrays

【解决方案1】：

使用FileReader，逐行获取字符串然后拆分合并到resultArr中，如下：

var file = document.getElementById('inputfile');

file.addEventListener('change', () => {
    var txtArr = [];
    var fr = new FileReader();
    fr.onload = function() {
        // By lines
        var lines = this.result.split('\n');
        for (var line = 0; line < lines.length; line++) {
            txtArr = [...txtArr, ...(lines[line].split(" "))];
        }
    }
    fr.onloadend = function() {
        console.log(txtArr);
        document.getElementById('output').textContent=txtArr.join("");
    }

    fr.readAsText(file.files[0]);
})

<!DOCTYPE html> 
<html> 

<head> 
    <title>Read Text File</title> 
</head> 

<body> 
    <input type="file" name="inputfile"
            id="inputfile"> 
    <br> 

    <pre id="output"></pre> 
    
</body> 

</html>

【讨论】：

您的代码是唯一适用于我的系统的示例。感谢代码 sn-p，它很有帮助。我可以看到该数组是 txtArr 并且其中包含所有字符串，总共 15 个字符串。但是，当我尝试访问单个字符串的 txtArr 时说 txtArr[3] 以获得 100，我在控制台中什么也得不到。如何以及在哪里放置代码来访问 txtArr？这个位置正确吗？ ` }fr.readAsText(file.files[0]); document.getElementById("输出").innerHTML = txtArr[1]; console.log(txtArr[1]);`我正在回答我自己的问题以显示我的新完整代码清单。
它应该在fr.onloadend函数@Aschoolar中

【解决方案2】：

其他方法不起作用的原因是 Javascript 无法访问文件系统。为此，您需要一种服务器端语言，例如 NodeJS。

无论如何，这里有一些纯 Javascript 代码，可让您加载文本文件，将结果拆分为每行的文本数组，然后再次拆分这些数据以获得每行数据的数据数组。作为一个小奖励，我还添加了一个方法来再次下载文本文件中的所有内容：

function loadFile(input, onloadCallback){
    const fr = new FileReader();

    fr.onload = onloadCallback;

    fr.readAsText(input);
}

/* Save file and force download */
function saveFile(data, fileName){
    const blob = new Blob([data], {type: 'text/csv'});
    if(window.navigator.msSaveOrOpenBlob) {
        window.navigator.msSaveBlob(blob, fileName);
    } else {
        var elem = window.document.createElement('a');
        elem.href = window.URL.createObjectURL(blob);
        elem.download = fileName;        
        document.body.appendChild(elem);
        elem.click();
        document.body.removeChild(elem);
    }
}

/* Working with text files */
function openFile(ev){
    loadFile(ev.target.files[0], function(e) {
        // Get all the text as a string
        const result = e.target.result;

        // Make array out of result for each line
        const textArray = result.split("\r\n");

        // How to add new lines to the array if you want
        textArray.push("tan 0.2 time 0.23641");

        // Create dataArray for each line
        let dataArray = [];

        for(let i = 0; i < textArray.length; i++){
            const data = textArray[i].split(" ");

            dataArray.push(data);
        }

        // dataArray now contains arrays for each line of data
        console.log(dataArray);

        // Here's how you'd put a normal array back into a string
        const newString = textArray.join("\r\n");

        // Finally a way to download a file with the new string inside it
        saveFile(newString, 'test.txt');
    });
}

【讨论】：

这个很有用。虽然不知道保存的 test.txt 文件的位置，但它可以工作。
@Aschoolar 该位置将是您保存它的位置。如果您使用保存功能，它会强制“下载”到您的浏览器，就像您从 Internet 下载的任何其他文件一样。
就像我说的：Javascript 无权访问文件系统。这是一项安全措施。因此，您的浏览器决定文件的保存位置。您的浏览器确实可以访问文件系统。如果您将其设置为默认位置，则它很可能位于您的“下载”目录中。如果您在浏览器中将其设置为“询问”，它会询问您将其保存在哪里。