眾所周知，在一個普通的HTML頁面中，如果要實現(xiàn)一個鏈接點擊后下載圖片，只需要在頁面上放一個<a>標簽，然后將屬性href的值指向圖片的URL或者Base64字符串就可以了?；蛘甙凑?a rel="external nofollow" target="_blank">stackoverflow上提供的方法動態(tài)創(chuàng)建<a>標簽來完成圖片的下載動作。不過原理都是相同的。

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

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

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

　　服務器中生成二維碼圖片的代碼很簡單。下面的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);
            });
        });
    }
}

　　二維碼圖片生成之后，通過調(diào)用VSCode內(nèi)置的Command來實現(xiàn)圖片下載：

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"命令實現(xiàn)文件下載。如果去掉"revalInExplorer"命令，則下載的就是Explorer中當前選中的文件（不一定是二維碼圖片）。

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

到此這篇關(guān)于VSCode Webview中如何實現(xiàn)點擊下載圖片的文章就介紹到這了,更多相關(guān)VSCode Webview點擊下載圖片內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論