VSCode WebView扩展中是否有通过URI字符串下载文件的API？

问题原因 #

原有浏览器端的a标签触发下载方案在VSCode WebView中失效，核心原因是VSCode WebView存在严格的内容安全策略(CSP)限制，默认禁用了download属性的自动下载行为，同时WebView上下文不具备直接写入本地文件系统的权限，必须通过和扩展主进程通信完成下载操作。

实现方案 #

整个实现分为WebView侧逻辑和扩展主进程侧逻辑两部分：

1. WebView侧修改 #

替换原有downloadURI方法，通过postMessage将下载参数传递给主进程，注意提前在WebView脚本中初始化VSCode通信对象：

// 初始化VSCode通信对象，全局只需要执行一次
const vscode = acquireVsCodeApi();

function downloadURI(uri, name) {
  vscode.postMessage({
    command: 'downloadFile',
    uri: uri,
    fileName: name
  });
}
// 调用方式和原有逻辑完全一致
downloadURI("data:text/html,HelloWorld!", "helloWorld.txt");

2. 扩展主进程侧逻辑 #

在主进程中监听WebView发送的下载消息，调用VSCode原生保存对话框让用户选择存储路径，处理文件内容后写入本地：

const vscode = require('vscode');
const fs = require('fs/promises');
const { Buffer } = require('buffer');
// 如果需要下载远程http/https资源，提前安装node-fetch依赖
// const fetch = require('node-fetch');

// 在你的WebView实例初始化完成后添加消息监听
webview.webview.onDidReceiveMessage(async (message) => {
  if (message.command !== 'downloadFile') return;

  const { uri, fileName } = message;
  // 弹出系统保存对话框，预设默认文件名
  const savePath = await vscode.window.showSaveDialog({
    defaultUri: vscode.Uri.file(fileName),
    saveLabel: '保存文件'
  });
  // 用户取消保存直接返回
  if (!savePath) return;

  try {
    let fileBuffer;
    // 处理Data URI格式的内容
    if (uri.startsWith('data:')) {
      const [header, contentPart] = uri.split(',', 2);
      fileBuffer = header.includes(';base64') 
        ? Buffer.from(contentPart, 'base64')
        : Buffer.from(decodeURIComponent(contentPart), 'utf8');
    } else {
      // 处理远程HTTP资源的情况
      const res = await fetch(uri);
      if (!res.ok) throw new Error('远程资源请求失败');
      fileBuffer = Buffer.from(await res.arrayBuffer());
    }

    // 写入文件到用户指定路径
    await fs.writeFile(savePath.fsPath, fileBuffer);
    vscode.window.showInformationMessage(`文件已成功保存到 ${savePath.fsPath}`);
  } catch (e) {
    vscode.window.showErrorMessage(`文件保存失败：${e.message}`);
  }
});

注意事项 #

• 如果需要下载远程HTTP资源，请先在扩展package.json的依赖中安装node-fetch包
• 大文件下载建议改用流式写入，避免内存占用过高
• 该实现完全符合VSCode扩展的安全规范，不会触发权限告警

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