在HTML页面上显示命令行输出

Question

我正在构建一个Web应用程序，该应用程序在终端上运行某些命令并将结果显示回Web应用程序。我可以使用child_process.exec运行命令并获取结果，但我面临的问题是在HTML页面上显示它。

我想要像这样的东西： 有没有办法像这样显示命令行输出？任何线索都可以。谢谢。

- Hith

---

你得到的结果是什么格式？ - yaakov

@YaakovAinspan 带有 \r\n 的纯文本。 - Hith

那么... 你试过什么了吗？你有任何展示问题的代码吗？ - yaakov

我正在将其附加到文本节点并显示结果，但格式与终端上的外观远远不同。[链接]https://i.stack.imgur.com/b9s5q.png - Hith

你能发布一些样本输出，这样我就可以看到它的样子吗？ - yaakov

您的文件使用 Windows 编码。请将输出文件编码为 Unix 换行符。 - NVRM

Answer 1

要在浏览器或Web应用程序中获得类似终端/ shell /控制台的体验，请查看以下内容...

JS解决方案，用于交互性

• https://xtermjs.org
• https://github.com/chjj/tty.js
• http://sdether.github.io/josh.js
• https://terminal.jcubic.pl/
• https://github.com/liftoff/GateOne
• https://github.com/1j01/simple-console
• https://www.masswerk.at/termlib/index.html

HTML/CSS-only解决方案，用于非交互性

要模拟一个终端，没有连接或交互性：

• https://github.com/ines/termynal
• https://github.com/tj/node-term-css
• https://guides.codechewing.com/mac-terminal-shell-css-html

或者从一个黑色背景、白色等宽字体开始，然后逐步构建...

CodePen

#container {
  background-color: #000000;
  width: 100%;
  height: 100%;
  max-width: 400px;
  max-height: 400px;
  padding: 3em;
}

#content {
  color: #ffffff;
  font-size: 16px;
  font-family: monospace;
}

<div id="container">
  <div id="content">
    <p>Hello world</p>
    <p>Hello world</p>
    <p>Hello world</p>
    <p>Hello world</p>
  </div>
</div>

- MarsAndBack