如何调整 xtermjs 终端的大小

Question

我不知道如何调整 xterm.js 终端的大小。有人知道怎么办吗？我尝试使用 css 但没有成功。

提前致谢。

Answer 1

您可以通过以下方式定义 xterm 基础数据来设置列和行：

let xterm = new Xterm({
    rows: 22,
    cols: x, //any value
});

要调整大小，您可以使用fitAddon：

let fitAddon = new FitAddon();
xterm.loadAddon(fitAddon);
fitAddon.fit();

xterm.onResize(function (evt) {
   websocket.send({ rows: evt.rows });
});

有关调整xterm.js终端大小的更多详细信息，请参见此处。

更新

我认为将上面的 prop 代码更改onResize为下面的代码并添加xterm_resize_ob将改进调整大小功能：

xterm.onResize(function (evt) {
  const terminal_size = {
    Width: evt.cols,
    Height: evt.rows,
  };
  websocket.send("\x04" + JSON.stringify(terminal_size));
});

const xterm_resize_ob = new ResizeObserver(function (entries) {
  // since we are observing only a single element, so we access the first element in entries array
  try {
    fitAddon && fitAddon.fit();
  } catch (err) {
    console.log(err);
  }
});

// start observing for resize
xterm_resize_ob.observe(document.querySelector("#xterm"));