眾所周知，在一個(gè)普通的HTML頁面中，如果要實(shí)現(xiàn)一個(gè)鏈接點(diǎn)擊后下載圖片，只需要在頁面上放一個(gè)<a>標(biāo)簽，然后將屬性href的值指向圖片的URL或者Base64字符串就可以了。或者按照stackoverflow上提供的方法動(dòng)態(tài)創(chuàng)建<a>標(biāo)簽來完成圖片的下載動(dòng)作。不過原理都是相同的。

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

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

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

　　服務(wù)器中生成二維碼圖片的代碼很簡(jiǎn)單。下面的qrcodeHelper類用來生成二維碼圖片并存放到.temp臨時(shí)目錄中：

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

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

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