VSCode Webview中如何實作點擊下載圖片-有解無憂

　　眾所周知，在一個普通的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部分，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/551336.html

標籤：其他

上一篇：vue-router3.x和vue-router4.x相互影響的問題記錄

下一篇：返回列表