请问如何使用 nodejs 的 readline 模块按行读取文件内容然后依次更新到 html 页面中？
HanningWu · 2017-04-03 21:17:11 +08:00 · 7362 次点击这是一个创建于 2809 天前的主题，其中的信息可能已经有所发展或是发生改变。
我有个文本文件 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 友提出，感谢大家！
 |
1
bdbai 2017-04-03 21:24:13 +08:00 via Android
有点好奇 js 直接调用 nodejs 模块是怎么实现的？
|
 |
2
HanningWu OP @bdbai 我在 node-webkit 中运行的，所以 js 中可以直接调用 nodejs ，是打算做一个 Web App
|
 |
3
jarlyyn 2017-04-03 21:31:30 +08:00
document.getElementById("outputStream").innerHTML(line);
为什么会显示多行…… 你每次都吧元素的内容设置为当前行啊。 那最后当然只能看到最后一行了 |
 |
4
qfdk 2017-04-03 21:34:07 +08:00 via iPhone
|
|
5
HanningWu OP @jarlyyn 我就是每次显示一行啊，但是由于 lineReader.on 这个方法循环了三次，所以对 outputStream 的内容改写了三次，理论上我应该能看到每次改写的变化的。
|
 |
6
bombless 2017-04-03 21:58:52 +08:00 via Android
要依赖系统卡住这一点？
感觉还不如你主动卡住 setTimeout 等待行数乘以 1000 ，就能慢慢看到显示了 |
 |
7
zbinlin 2017-04-04 00:06:59 +08:00 via Android
innerHTML 这里怎么是一个函数来的？
|
|
8
HanningWu OP @zbinlin 更正内容 innerHTML(line) 为 innerHTML = line
不好意思手快打错了。 |
 |
10
SuperMild 2017-04-04 10:53:50 +08:00
建议看一下 D3.js ，有控制动态过程的功能。
|
 |
11
123s 2017-04-04 12:07:07 +08:00 via Android
额，你一次过插入再做动画就好了，不然就要写多不少代码
|
|
12
bdbai 2017-04-04 13:38:07 +08:00 via iPhone
|
|
13
HanningWu OP @jarlyyn 最终是需要实现这样一个效果，示例代码： https://jsfiddle.net/09kuyn7v/ 。唯一不同的是，数据不是从数组中读取，而是从文件每一行读取出来，然后以同样的效果通过点击按钮显示到 html 的一个段落中去。
|
|
17
HanningWu OP @jarlyyn 我也是这么想的，所以后来又问了这个问题： https://www.v2ex.com/t/352731#reply24
|
Select Language