请问如何使用 nodejs 的 readline 模块按行读取文件内容然后依次更新到 html 页面中？
HanningWu 2017-04-03 21:17:11 +08:00 7727 次点击这是一个创建于 3188 天前的主题，其中的信息可能已经有所发展或是发生改变。
我有个文本文件 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 PRO |
| 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 我也是这么想的，所以后来又问了这个问题： t/352731#reply24 |
Select Language