VSCode Webview中如何实现点击下载图片

  • VSCode Webview中如何实现点击下载图片已关闭评论
  • 222 次浏览
  • A+
所属分类:Web前端
摘要

  众所周知,在一个普通的HTML页面中,如果要实现一个链接点击后下载图片,只需要在页面上放一个<a>标签,然后将属性href的值指向图片的URL或者Base64字符串就可以了。或者按照stackoverflow上提供的方法动态创建<a>标签来完成图片的下载动作。不过原理都是相同的。

  众所周知,在一个普通的HTML页面中,如果要实现一个链接点击后下载图片,只需要在页面上放一个<a>标签,然后将属性href的值指向图片的URL或者Base64字符串就可以了。或者按照stackoverflow上提供的方法动态创建<a>标签来完成图片的下载动作。不过原理都是相同的。

  但是这个方法在VSCode的Webview中不起作用,点击链接之后没有任何反应。如果图片的地址是一个可以独立访问的绝对地址,例如任何一个互联网上可以访问到的图片地址,则点击链接之后VSCode会将图片在浏览器中打开。我猜想图片下载的功能在VSCode的Webview中可能被限制了。如果要实现图片下载,只能在Server端中转一下,然后通过VSCode内置的Command来完成下载动作。

  假设我们要下载一个二维码图片,基本流程如下:

  1. 客户端将要生成二维码图片的字符串发送到服务器。
  2. 服务器用第三方库生成二维码图片(例如node-qrcode),并存放到一个指定的临时目录中。
  3. 服务器调用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-samplewebview-view-sample部分。