VSCode Webview中實現點擊下載圖片的基本流程

Posted on by

眾所周知，在一個普通的HTML頁面中，如果要實現一個鏈接點擊後下載圖片，隻需要在頁面上放一個<a>標簽，然後將屬性href的值指向圖片的URL或者Base64字符串就可以瞭。或者按照stackoverflow上提供的方法動態創建<a>標簽來完成圖片的下載動作。不過原理都是相同的。

　　但是這個方法在VSCode的Webview中不起作用，點擊鏈接之後沒有任何反應。如果圖片的地址是一個可以獨立訪問的絕對地址，例如任何一個互聯網上可以訪問到的圖片地址，則點擊鏈接之後VSCode會將圖片在瀏覽器中打開。我猜想圖片下載的功能在VSCode的Webview中可能被限制瞭。如果要實現圖片下載，隻能在Server端中轉一下，然後通過VSCode內置的Command來完成下載動作。

　　假設我們要下載一個二維碼圖片，基本流程如下：

  • 客戶端將要生成二維碼圖片的字符串發送到服務器。
  • 服務器用第三方庫生成二維碼圖片（例如node-qrcode），並存放到一個指定的臨時目錄中。
  • 服務器調用VSCode內置的Command實現二維碼圖片的下載。

　　服務器中生成二維碼圖片的代碼很簡單。下面的qrcodeHelper類用來生成二維碼圖片並存放到.temp臨時目錄中：

import * as fs from 'fs-extra';
import * as path from 'path';
import * as qrcode from 'qrcode';
export class qrcodeHelper {
    public static generateImage(s: string): Promise<string> {
        let _path = "/.temp/qrcode.png";
        fs.ensureDirSync(path.dirname(_path));
        return new Promise<string>((resolve, reject) => {
            qrcode.toFile(_path, s, {}, function (err) {
                if (err) reject(err);
                resolve(_path);
            });
        });
    }
}

　　二維碼圖片生成之後，通過調用VSCode內置的Command來實現圖片下載：

let _imagePath = await qrcodeHelper.generateImage("qrcode string here...");
if (_imagePath) {
    await vscode.commands.executeCommand("revealInExplorer", vscode.Uri.file(_imagePath));
    await vscode.commands.executeCommand("explorer.download");
}

　　"revalInExplorer"命令用來在Explorer中選中當前文件，"explorer.download"命令實現文件下載。如果去掉"revalInExplorer"命令，則下載的就是Explorer中當前選中的文件（不一定是二維碼圖片）。

　　有關如何在VSCode的Webview中實現客戶端和服務器端之間的通信，可以參考微軟官方示例中的webview-sample和webview-view-sample部分。

到此這篇關於VSCode Webview中如何實現點擊下載圖片的文章就介紹到這瞭,更多相關VSCode Webview點擊下載圖片內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：