如何在vscode中保存整个Webview

Question

在Webview Api Guide 的“持久性”部分中，展示了如何持久化 JSON 可序列化状态对象。 但是，如果 webview 失去焦点，我怎样才能使我的整个 html 代码保持不变呢？

在我的扩展程序中，我正在接收来自 vscode 扩展程序的消息并通过附加 <p>paragraph</p> 来更新 Webview 给它。

Answer 1

当您创建 webview 时，您可以设置一个选项以在隐藏视图时保留内容，如下所示：

    let panel = window.createWebviewPanel(
        'antlr4-vscode-webview', options.title, ViewColumn.Two, {
            enableScripts: true,
            retainContextWhenHidden: true
        }
    );

如果您只想保留某个 DOM 节点（包括正文甚至整个文档），您可以向 webview 发送消息，处理此消息的函数从节点获取外部 HTML 并将该文本发送回您的扩展程序，可以保存并稍后恢复。

在我的扩展 vscode-antlr4 中，我对 export generated SVG content（使用 D3.js 创建）执行此操作：

function exportToSVG(type, name) {
    // Saving the SVG is delegated to the extension to allow asking the user for a target file.
    const svg = document.querySelectorAll('svg')[0];
    const args = {
        command: "saveSVG",
        name: name,
        type: type,
        svg: svg.outerHTML
    };

    vscode.postMessage(args);
}

处理此消息的代码在WebviewProvider 类中。同一个文件还包含向 webview 内容发送消息的方法：

protected sendMessage(uri: Uri, args: any): boolean {
    if (this.webViewMap.has(uri.toString())) {
        let [panel, _] = this.webViewMap.get(uri.toString())!;
        panel.webview.postMessage(args);
        return true;
    }
    return false;
}