WebShell中获取任意文件所在当前目录

发表于 更新于 本文字数： 983 阅读时长 ≈ 2 分钟

基于xterm.js的webshell在实现选中文件名直接下载文件时遇到了困难，这个feat里如何获取文件名所在的目录。经过实际调研确定了解决方案，这里Mark下。

实现方案

  1. 首先终端会话留中能够返回每次命令执行后的目录是利用了函数钩子。

    https://static.1991421.cn/2024/2024-09-19-142022.jpeg

  2. 这里利用registerOscHandler，来监听Ansi序列，进而提取整个数据中的CurrentDir。

1
2
3
4
5
6
7
const cwdArr = []; // index 0没用到
term.parser.registerOscHandler(1337, data => {
  const currenDirArr = data?.match?.(/(;CurrentDir=)([^;\u0007]+)/);
  if (currenDirArr?.length >= 3) {
    cwdArr[term.buffer.active.baseY + term.buffer.active.cursorY] = currenDirArr[2];
  }
})

  1. 监听选中事件，根据选中的位置结合cwdArr来计算选中文件名所在的CWD路径。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    term.onSelectionChange(() => {
      const selection = term.getSelection();
      if (!selection) {
        return;
      }
      const selectionPosition = term.getSelectionPosition();
      term.getSelection() && copyToClipboard(term.getSelection());
      let rowNum = selectionPosition.start.y; // 行号
      while (rowNum < cwdArr.length && !cwdArr[rowNum]) {
        rowNum++;
      }
      const cwd = cwdArr[rowNum];
      console.log('选中文件', pathJoin(cwd, selection));
    });

写在最后

WebShell下的命令补全实现的关键实际上类似于上述问题，关键点即用好registerOscHandler。