眾所周知，在一個(gè)普通的HTML頁(yè)面中，如果要實(shí)現(xiàn)一個(gè)鏈接點(diǎn)擊后下載圖片，只需要在頁(yè)面上放一個(gè)<a>標(biāo)簽，然后將屬性href的值指向圖片的URL或者Base64字符串就可以了?；蛘甙凑誷tackoverflow上提供的方法動(dòng)態(tài)創(chuàng)建<a>標(biāo)簽來(lái)完成圖片的下載動(dòng)作。不過(guò)原理都是相同的。
但是這個(gè)方法在VSCode的Webview中不起作用，點(diǎn)擊鏈接之后沒(méi)有任何反應(yīng)。如果圖片的地址是一個(gè)可以獨(dú)立訪問(wèn)的絕對(duì)地址，例如任何一個(gè)互聯(lián)網(wǎng)上可以訪問(wèn)到的圖片地址，則點(diǎn)擊鏈接之后VSCode會(huì)將圖片在瀏覽器中打開(kāi)。我猜想圖片下載的功能在VSCode的Webview中可能被限制了。如果要實(shí)現(xiàn)圖片下載，只能在Server端中轉(zhuǎn)一下，然后通過(guò)VSCode內(nèi)置的Command來(lái)完成下載動(dòng)作。
假設(shè)我們要下載一個(gè)二維碼圖片，基本流程如下：
- 客戶端將要生成二維碼圖片的字符串發(fā)送到服務(wù)器。
- 服務(wù)器用第三方庫(kù)生成二維碼圖片（例如node-qrcode），并存放到一個(gè)指定的臨時(shí)目錄中。
- 服務(wù)器調(diào)用VSCode內(nèi)置的Command實(shí)現(xiàn)二維碼圖片的下載。
服務(wù)器中生成二維碼圖片的代碼很簡(jiǎn)單。下面的qrcodeHelper類用來(lái)生成二維碼圖片并存放到.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); }); }); } }
二維碼圖片生成之后，通過(guò)調(diào)用VSCode內(nèi)置的Command來(lái)實(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"命令用來(lái)在Explorer中選中當(dāng)前文件，"explorer.download"命令實(shí)現(xiàn)文件下載。如果去掉"revalInExplorer"命令，則下載的就是Explorer中當(dāng)前選中的文件（不一定是二維碼圖片）。文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-426290.html
有關(guān)如何在VSCode的Webview中實(shí)現(xiàn)客戶端和服務(wù)器端之間的通信，可以參考微軟官方示例中的webview-sample和webview-view-sample部分。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-426290.html
到了這里，關(guān)于VSCode Webview中如何實(shí)現(xiàn)點(diǎn)擊下載圖片的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
