VSCode扩展Webview Panel内文件链接点击无响应，如何实现文档加载？

VSCode的Webview出于安全限制，默认会拦截file://协议的本地链接，直接写<a href="file:///xxx">点击后不会有任何响应。要实现点击链接加载对应文档，得通过Webview与扩展主进程的消息通信来完成，具体步骤如下：

1. 改造Webview中的链接 #

给HTML里的文件链接添加自定义点击事件，阻止默认跳转行为，转而向主进程发送包含文件路径的消息：

<!-- 用data-path存储文件路径，href设为#避免默认跳转提示 -->
<a href="#" class="file-link" data-path="/absolute/path/to/your/document.md">查看文档</a>

<script>
// 批量绑定所有文件链接的点击事件
document.querySelectorAll('.file-link').forEach(link => {
  link.addEventListener('click', (e) => {
    e.preventDefault();
    const targetPath = link.dataset.path;
    // 向扩展主进程发送打开文件的请求
    window.postMessage({
      type: 'triggerOpenFile',
      filePath: targetPath
    }, '*');
  });
});
</script>

2. 在扩展主进程中处理消息 #

创建Webview Panel时，开启脚本支持并监听Webview发送的消息，收到请求后调用VSCode内置API打开目标文件：

const vscode = require('vscode');

function activate(context) {
  // 创建Webview Panel的示例代码
  const panel = vscode.window.createWebviewPanel(
    'customDocPanel',
    '文档面板',
    vscode.ViewColumn.One,
    {
      enableScripts: true, // 必须开启脚本才能让Webview发送消息
      retainContextWhenHidden: true // 可选：隐藏面板时保留上下文
    }
  );

  // 监听Webview的消息
  panel.webview.onDidReceiveMessage(
    (message) => {
      if (message.type === 'triggerOpenFile') {
        // 调用VSCode API打开指定路径的文件
        vscode.workspace.openTextDocument(message.filePath)
          .then(doc => vscode.window.showTextDocument(doc));
      }
    },
    undefined,
    context.subscriptions
  );
}

exports.activate = activate;

3. 处理相对路径场景 #

如果文件路径是相对于当前工作区的，需要先将其转换为绝对路径再传递：

// 在主进程的消息处理逻辑中修改
if (message.type === 'triggerOpenFile') {
  // 获取当前工作区根目录
  const workspaceRoot = vscode.workspace.workspaceFolders?.[0]?.uri;
  if (!workspaceRoot) {
    vscode.window.showErrorMessage('当前未打开工作区');
    return;
  }
  // 将相对路径转换为绝对URI
  const targetUri = vscode.Uri.joinPath(workspaceRoot, message.filePath);
  vscode.workspace.openTextDocument(targetUri)
    .then(doc => vscode.window.showTextDocument(doc));
}

4. 保留链接样式 #

上述改造不会影响原有的蓝色下划线样式，因为只是拦截了默认跳转行为，链接的CSS样式依然会正常生效。

内容的提问来源于stack exchange，提问作者Bob