请问如何使用 Nodejs 的 readline 模块按行读取文件内容然后依次更新到 html 页面中？

请问如何使用 Nodejs 的 readline 模块按行读取文件内容然后依次更新到 html 页面中？

我有个文本文件 cellphone.txt ，有三行内容

iPhone
Pixel
Windows Phone

在HTML文件中，我利用按钮（button）的onclick时间去触发下文中的 js 脚本中包含的函数 startOutput()，这个函数中先创建一个 id 为 outputStream 的段落，然后用 nodejs 里的 readline 模块按行读取 cellphone.txt 文件中的内容，每读取一行就更新到 outputStream 中去，实现顺序显示文件每行内容。但实际运行的时候，并不是依次显示 iPhone ，然后 Pixel ，最后再是 Windows Phone ，而是卡一阵子，然后 outputStream 段落中只显示最后一行内容 Windows Phone 。当然，你可能会说由于你这里只有三行，依次显示的速度太快了，你没看到前两次输出。换成一个拥有1000行内容的文本文件，效果也是卡一阵子，然后只输出最后一行。

HTML 文件：

<html>
<body>
<script src='output.js'></script>

<button type=“button” onclick=“startOutput()”></button>


</body>
</html>

JavaScript 文件：

//output.js

function startOutput() {
document.write(’<p id=“outputStream”>初始文本<p>’);
var fs = require(‘fs’);
var lineReader = require(‘readline’).createInterface({
input: fs.createReadStream(‘cellphone.txt’) // 建立 txt 文件的读取流
});


lineReader.on(‘line’, function (line) {  //按行对读取流内容进行操作
document.getElementById(“outputStream”).innerHTML(line);
}
}

这里并不一定非要用button去触发这个函数。我的主要目的是在 html 页面中，按行显示文件内容（必须要有显示过程，先第一行，再第二行，然后以此类推），如果有其他方法可以实现这一点，欢迎 V 友提出，感谢大家！


20 回复

有点好奇 js 直接调用 nodejs 模块是怎么实现的？


我在 node-webkit 中运行的，所以 js 中可以直接调用 nodejs ，是打算做一个 Web App

document.getElementById(“outputStream”).innerHTML(line);

为什么会显示多行……

你每次都吧元素的内容设置为当前行啊。

那最后当然只能看到最后一行了

http://browserify.org 不谢

我就是每次显示一行啊，但是由于 lineReader.on 这个方法循环了三次，所以对 outputStream 的内容改写了三次，理论上我应该能看到每次改写的变化的。

要依赖系统卡住这一点？
感觉还不如你主动卡住

setTimeout 等待行数乘以 1000 ，就能慢慢看到显示了

innerHTML 这里怎么是一个函数来的？

更正内容 innerHTML(line) 为 innerHTML = line
不好意思手快打错了。

感谢提示！我去研究一下 setTimeout 函数的使用方法。

建议看一下 D3.js ，有控制动态过程的功能。

额，你一次过插入再做动画就好了，不然就要写多不少代码

二楼说了 node-webkit ，没打算谢。
另外 https://webpack.github.io 不谢

最终是需要实现这样一个效果，示例代码： https://jsfiddle.net/09kuyn7v/ 。唯一不同的是，数据不是从数组中读取，而是从文件每一行读取出来，然后以同样的效果通过点击按钮显示到 html 的一个段落中去。



所以你应该先把数据取出来压倒这个 list 里
然后再执行这段动画啊……

数据量太大了，内存不够，不能一次性读取到数组中去。只能通过用流式方法读取。。



所以读一批，动画执行完了再去读下一批啊……

我也是这么想的，所以后来又问了这个问题： https://www.v2ex.com/t/352731#reply24


请允许我一脸懵逼……

你不 close 文件继续读不行么……

或者记录下行号……

用 fs.read 啊

遇到的问题是怎样把用 readline 读出来的内容更新到页面中去显示出来，不要纠结我怎么读取文件了……按你说的加一个 lineReader.close() 反而一条内容都读不出来了。

要在 Node.js 中使用 readline 模块按行读取文件内容并依次更新到 HTML 页面中，你可以按照以下步骤操作。这里假设你有一个简单的 HTML 页面，通过 AJAX 请求获取文件内容并动态更新。

首先，在服务器端创建一个 Node.js 脚本，使用 readline 模块读取文件并发送响应：

// server.js
const http = require('http');
const fs = require('fs');
const readline = require('readline');

const server = http.createServer((req, res) => {
  if (req.url === '/file') {
    const fileStream = fs.createReadStream('yourfile.txt');
    const rl = readline.createInterface({
      input: fileStream,
      crlfDelay: Infinity
    });

    res.writeHead(200, { 'Content-Type': 'text/plain' });
    rl.on('line', (line) => {
      res.write(line + '\n');
    });

    rl.on('close', () => {
      res.end();
    });
  } else {
    res.writeHead(404);
    res.end('Not Found');
  }
});

server.listen(3000, () => {
  console.log('Server listening on port 3000');
});

然后在你的 HTML 页面中，使用 JavaScript 发起 AJAX 请求并更新页面：

<!DOCTYPE html>
<html>
<body>
  <div id="content"></div>
  <script>
    fetch('/file')
      .then(response => response.text())
      .then(data => {
        const contentDiv = document.getElementById('content');
        contentDiv.innerHTML = data.replace(/\n/g, '<br>');
      });
  </script>
</body>
</html>

这样，文件内容会按行读取并通过 AJAX 动态更新到 HTML 页面中。

回到顶部