Xterm.js 是一个基于 TypeScript 的前端终端模拟器库，它允许你在浏览器中嵌入一个功能强大的终端。Xterm.js 提供了丰富的 API 和配置选项，使得开发者可以轻松地创建自定义的终端应用。本文将介绍如何使用 Xterm.js，并提供一个基本的页面示例，以及常见的参数和方法。
Xterm.js基本示例、常见参数和方法
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Xterm.js基本示例、常见参数和方法</title>
<!-- 使用 unpkg 引用 Xterm.js 的 CSS 文件 -->
<link rel="stylesheet" href="https://unpkg.com/xterm@latest/css/xterm.css">
<!-- 使用 unpkg 引用 Xterm.js 和 FitAddon -->
<script src="https://unpkg.com/xterm@latest/lib/xterm.js"></script>
<script src="https://unpkg.com/xterm-addon-fit@latest/lib/xterm-addon-fit.js"></script>
<style>
html,body {
margin: 0;
padding: 0;
height: 100%;
background-color: #1E1E1E;
}
#terminal {
height: 100%;
}
</style>
</head>
<body>
<div id="terminal"></div>
<script>
// 初始化终端
const term = new Terminal({
cursorBlink: true, // 光标闪烁
fontSize: 16, // 字体大小
fontFamily: 'monospace', // 字体
lineHeight: 1.2, // 行高
letterSpacing: 1, // 字符间距
//cols: 80, // 初始列数
//rows: 24, // 初始行数
theme: {
background: '#1e1e1e', // 背景色
foreground: '#ffffff', // 前景色
cursor: '#ff0000', // 光标颜色
selection: '#666666', // 选中文本的背景色
},
cursorStyle: 'bar', // 光标样式（block/bar/underline）
cursorWidth: 2, // 光标宽度（仅对 bar 样式有效）
scrollback: 5000, // 可回滚的行数
scrollSensitivity: 2, // 滚动灵敏度
allowTransparency: true, // 允许背景透明
convertEol: true, // 将换行符转换为回车换行符
disableStdin: false, // 是否禁止用户输入
windowsMode: false, // 是否启用 Windows 模式
});
// 初始化 FitAddon
const fitAddon = new FitAddon.FitAddon();
term.loadAddon(fitAddon); // 加载 FitAddon
// 将终端附加到页面上的 div 元素
term.open(document.getElementById('terminal'));
// 调整终端大小以适配容器
fitAddon.fit(); // 初始适配
window.addEventListener('resize', () => fitAddon.fit()); // 窗口大小变化时重新适配
// 向终端写入欢迎信息
term.writeln('注意！这是基础的Xterm.js！'); // 写入一行文本并换行
term.writeln('如需支持回车、ctrl+a、ctrl+c、ctrl+v、tab等需要额外增加js代码。'); // 写入一行文本并换行
term.write('尝试输入: '); // 写入文本不换行
// 处理用户输入
term.onData(data => {
term.write(data); // 将用户输入回显到终端
});
// 监听键盘按键事件
term.onKey(e => {
console.log('按键:', e.key); // 打印按键信息
});
// 监听终端大小变化事件
term.onResize(data => {
console.log('终端大小:', data.cols, 'x', data.rows); // 打印终端大小
});
// 监听换行事件
term.onLineFeed(() => {
console.log('换行'); // 打印换行信息
});
// 监听滚动事件
term.onScroll(newPosition => {
console.log('滚动位置:', newPosition); // 打印滚动位置
});
// 选择终端中的所有内容
term.selectAll(); // 选中所有文本
// 获取当前选中的文本
const selectedText = term.getSelection(); // 获取选中文本
console.log('选中文本:', selectedText); // 打印选中文本
// 清除当前选中的文本
term.clearSelection(); // 清除选中文本
// 滚动到底部
term.scrollToBottom(); // 滚动到底部
// 滚动到顶部
term.scrollToTop(); // 滚动到顶部
// 滚动到指定行
term.scrollToLine(10); // 滚动到第 10 行
// 清除终端内容
term.clear(); // 清除终端内容
// 重置终端状态
term.reset(); // 重置终端
// 聚焦到终端
term.focus(); // 聚焦终端
// 取消聚焦
term.blur(); // 取消聚焦
// 调整终端的列数和行数
//term.resize(100, 30); // 调整终端大小
// 销毁终端实例并释放资源
// term.dispose(); // 销毁终端
// 刷新指定行范围的内容
term.refresh(0, term.rows); // 刷新终端内容
// 清除终端的纹理缓存
term.clearTextureAtlas(); // 清除纹理缓存
</script>
</body>
</html>
转载请注明：运维博客 » Xterm.js基本示例、常见参数、常见方法