VSCode WebView Extension 中是否有 API 可以从 uri 字符串下载文件？

Question

我正在编写 VSCode 的扩展，并尝试使用建议的文件名从 uri 字符串下载文件。 这通常是在浏览器上完成的，但在扩展程序中不起作用。

function downloadURI(uri, name) {
  var link = document.createElement("a");
  link.download = name;
  link.href = uri;
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
  delete link;
}

然后称呼它：

downloadURI("data:text/html,HelloWorld!", "helloWorld.txt");

对于 vscode 扩展 webview 应该如何编写？

Answer 1

您可以获取图像，获取缓冲区，然后使用 fs 将其写入 Downlaods。

import * as vscode from 'vscode';
import * as path from 'path';
import * as fs from 'fs';
import * as os from 'os';
import fetch from 'node-fetch';

export async function downloadImage(imageUrl: string, fileName: string) {
    try {
        let buffer: Buffer;

        if (imageUrl.startsWith('data:image')) {
            // Handle Base64 image URL
            const base64Data = imageUrl.split(',')[1];
            buffer = Buffer.from(base64Data, 'base64');
        } else {
            // Handle normal image URL
            const response = await fetch(imageUrl);
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            buffer = Buffer.from(await response.arrayBuffer());
        }

        const downloadsPath = path.join(os.homedir(), 'Downloads');
        const filePath = path.join(downloadsPath, fileName);

        fs.writeFile(filePath, buffer, (err) => {
            if (err) {
                vscode.window.showErrorMessage('Failed to download image.');
            } else {
                vscode.window.showInformationMessage(`Image downloaded to ${filePath}`);
            }
        });
    } catch (error) {
        vscode.window.showErrorMessage(`Error downloading image: ${error.message}`);
    }
}

Answer 2

不要在 Web 视图中处理下载，而是使用所选文件名向您的扩展程序发送消息，并在扩展程序中使用 Node.js（或 axios，或您喜欢的任何内容）来获取文件。这样做的另一个优点是，您可以将文件存储在任何地方，而在浏览器上下文中，您只能将文件存储在设置的下载位置。