有base64链接，下载图片（vue）

最新推荐文章于 2024-11-21 16:55:55 发布

予倾

最新推荐文章于 2024-11-21 16:55:55 发布

阅读量153

点赞数

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.csdn.net/QZ9420/article/details/115871350

vue 专栏收录该内容

56 篇文章

订阅专栏

本文介绍了一种使用Base64编码的图片数据进行下载的方法。通过JavaScript实现了从Base64转换为Blob对象，并创建了一个隐藏的a标签来触发文件下载。此方法适用于网页环境中动态生成或需要下载的图片。

有链接下载图片

 //下载图片
      download() {
        let imgData = 'base64---------';//这里放需要下载的base64
        this.downloadFile('测试.png', imgData);
      },
      //下载
      downloadFile(fileName, content) {
        let aLink = document.createElement('a');
        let blob = this.base64ToBlob(content); //new Blob([content]);
 
        let evt = document.createEvent("HTMLEvents");
        evt.initEvent("click", true, true);//initEvent 不加后两个参数在FF下会报错  事件类型，是否冒泡，是否阻止浏览器的默认行为
        aLink.download = fileName;
        aLink.href = URL.createObjectURL(blob);
 
        // aLink.dispatchEvent(evt);
        aLink.click()
      },
      //base64转blob
      base64ToBlob(code) {
        let parts = code.split(';base64,');
        let contentType = parts[0].split(':')[1];
        let raw = window.atob(parts[1]);
        let rawLength = raw.length;
 
        let uInt8Array = new Uint8Array(rawLength);
 
        for (let i = 0; i < rawLength; ++i) {
          uInt8Array[i] = raw.charCodeAt(i);
        }
        return new Blob([uInt8Array], {type: contentType});
      },