vue根据后端返回的base64图片数据转成图片并下载

最新推荐文章于 2024-04-18 15:27:15 发布

XZD_Fitz

最新推荐文章于 2024-04-18 15:27:15 发布

阅读量2.8k

点赞数 3

分类专栏： web 文章标签： javascript 前端 vue

本文链接：https://blog.csdn.net/xiaozhidian/article/details/129166541

版权

web 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

//imageBase64是后台传回来的base64数据
handleDownloadQrIMg(imageBase64) {
      // 这里是获取到的图片base64编码,这里只是个例子哈，要自行编码图片替换这里才能测试看到效果
      const imgUrl = `data:image/jpg;base64,${imageBase64}`;
      // 如果浏览器支持msSaveOrOpenBlob方法（也就是使用IE浏览器的时候），那么调用该方法去下载图片
      if (window.navigator.msSaveOrOpenBlob) {
        const bstr = atob(imgUrl.split(',')[1]);
        let n = bstr.length;
        const u8arr = new Uint8Array(n);
        while (n--) {
          u8arr[n] = bstr.charCodeAt(n);
        }
        const blob = new Blob([u8arr]);
        window.navigator.msSaveOrOpenBlob(blob, 'filename.jpg');
      } else {
        // 这里就按照chrome等新版浏览器来处理
        const a = document.createElement('a');
        a.href = imgUrl;
        a.setAttribute('download', 'filename.jpg');
        a.click();
      }
}