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

2024-02-16

我正在构建一个网络应用程序,它在终端上运行某些命令并将结果显示回网络应用程序上。我能够使用 child_process.exec 运行命令并获取我面临的问题的结果,同时将其显示在 html 页面上。

I want something like this: enter image description here

有什么办法可以显示这样的命令行输出吗?任何线索都可以。谢谢。


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

JS 解决方案,用于交互

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

仅 HTML/CSS 解决方案,用于非交互性

要模拟没有连接或交互性的终端:

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

或者也许从头开始使用黑色背景、白色等宽字体,然后从那里开始构建......

CodePen https://codepen.io/MarsAndBack/pen/oJBXpN

#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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在 html 页面上显示命令行输出 的相关文章

随机推荐

  • DockPanel.Dock="Right" 不适用于最大化窗口上的单个控件?

    我正在使用 DockPanel Dock 将控件停靠在特定位置 即左 右 问题是我的控件没有根据 DockPanel Dock 位置停靠 下面是单个控件的代码DockPanel Dock Right
  • 为什么需要 PrintWriter?

    我真的很困惑各种 io 类的用途 例如 如果我们有 BufferedWriter 为什么我们需要 PrintWriter BufferedReader reader new BufferedReader new FileReader fil
  • array_agg() 的替代品?

    有没有 PostgreSQL 的替代品array agg 函数 以便它不会返回以下格式的值 x y z 我可以让它返回吗 x y z In PostgreSQL 9 0或稍后使用string agg val https www postgr
  • wglShareLists 失败并出现错误 6:ERROR_INVALID_HANDLE 句柄无效

    我尝试在两个类之间共享 HPBUFFERARB TGLForm 和 TGLForm2 我尝试过 FBO 但有一个旧的 Borland Builder 6 版本 我无法使用 FBO 进行管理 我的目标是在两个 openGL 窗口中显示相同的缓
  • CSS 浮动页脚

    我想制作一个保留在可视窗口底部的页脚 除非当您调整窗口大小时它会与内容相抵触 我试过 底部 0 位置 绝对 但是当窗口较小时 页脚会妨碍 我相信这会做你想要的 CSS 布局 100 高度 包含页眉和页脚 http www xs4all nl
  • 按组顺序填充 NA 值

    我正在尝试填充数据集中的一些值 我的数据的简化版本如下 gt example df Date GROUP value 157 2018 01 31 10180 3 464 158 2018 02 28 10180 3 413 159 201
  • 将 Javascript 应用程序转换为 Windows 应用程序

    除了Adobe Air还有其他解决方案吗 我听说 V8 有点东西 只是现在没有时间 用另一种语言编写整个应用程序 然后编写 2 倍以上的代码 也许你可以使用jsc 从命令行编译 JScript 代码 http msdn microsoft
  • 如何在 Azure 中允许 URL 编码路径段

    我有一个在 Azure 中运行的 ASP NET 6 MVC 应用程序 我有一个控制器 其动作如下 HttpDelete Route image url public async Task
  • 使用柏林噪声来创造闪电?

    实际上 我有几个与主题标题中给出的主题相关的问题 我已经在我的应用程序中使用 Perlin 函数创建闪电 但我对我的实现并不完全满意 以下问题基于初始和改进的 Perlin 噪声实现 为了简化问题 我们假设我通过使用 1D Perlin 函
  • 我可以有两个 Fancybox 2.0 实例吗?

    我在我的网站上安装了 Fancybox 2 0 稍加修改使其看起来像 Facebook 图像预览框 我想要有 Fancybox 的第二个 实例 但它的定位不同 我的图像预览 Fancybox 当前实例 应距顶部 20 像素 目前 但我的共享
  • 使用 jquery 根据 4 个输入的总和设置数字输入最大值

    我有 4 个输入字段 我需要所有字段的总数不超过 100 我想设置要更改的字段的最大值 我一直在尝试调整 keyup 上的值 然后将其他字段的总和与当前字段的总和相区别并设置最大值 似乎工作了一段时间然后就停止了 JSfiddle 示例 h
  • Docker 添加当前目录中的每个文件

    我有一个简单的 Web 应用程序 我想将其放置在 docker 容器中 角度应用程序存在于frontend 文件夹 该文件夹位于application folder 当 Dockerfile 位于application 文件夹 内容如下 F
  • 有没有一种简单的方法可以从 python 中的无空格句子生成可能的单词列表?

    我有一些文字 s Imageclassificationmethodscan beroughlydividedinto two broad families of approaches 我想将其解析为单独的单词 我很快地研究了附魔和nltk
  • Pytorch 0.4.0:可以通过三种方式在 CUDA 设备上创建张量。他们之间有什么区别吗?

    我第三条路失败了 t3仍在CPU上 不知道为什么 a np random randn 1 1 2 3 t1 torch tensor a t1 t3 to torch device cuda t2 torch tensor a t2 t2
  • 在 php 中为多个图像上传创建缩略图时出错

    我使用以下代码上传 重命名 压缩 创建缩略图一切正常 最近我注意到在创建缩略图时 它还会为以前上传的图像创建缩略图图像的新副本 也为上传的图像创建缩略图 Problem 提交表单后 它会生成用于上传图像和已上传图像 较旧版本中存在的图像文件
  • 无法加载文件或程序集“Oracle.DataAccess”64 位 ODP.NET

    我在用ODP NET在我的 asp net 项目中 以便应用程序能够与 Windows 2008 服务器 32 位 上的 Oracle 11 g Express 进行通信 在开发机器上 我使用的是 Windows 7 32 位 我在开发计算
  • 未找到特征“Spatie\MediaLibrary\HasMedia\HasMediaTrait”

    它显示错误 无法获取 HasMedia 红色字体 的命名空间和 HasMediaTrait 的未定义类 第 16 行 有什么想法吗 None
  • 查找元素彼此相距最远的子集

    我有一个面试问题 我似乎无法弄清楚 给定一个大小为 N 的数组 找到大小为 k 的子集 使得子集中的元素彼此相距最远 换句话说 最大化元素之间的最小成对距离 Example Array 1 2 6 10 k 3 answer 1 6 10
  • 将 HTML 表解析为 CSV 的最佳方法

    我必须从现有网站上获取一些产品数据并将其放入数据库中 数据全部采用 HTML 表格格式 型号是唯一的 但每个产品可以有任意数量的不同属性 因此我需要解析的表格都有不同的列和标题 table tr td Model No td td Weig
  • 在 html 页面上显示命令行输出

    我正在构建一个网络应用程序 它在终端上运行某些命令并将结果显示回网络应用程序上 我能够使用 child process exec 运行命令并获取我面临的问题的结果 同时将其显示在 html 页面上 I want something like