• vue--base64文件下载和显示


    //html代码
    
    <template>
        <el-col :span="20" class="codesrc">
                  <img :src="'data:image/png;base64'+`,`+initdata.participantQRCode" alt="">
        </el-col>
        <el-col :span="24" style="text-align: center;">
                    <el-button class="btnsty" sizi="mini" @click="copyText()">保存图片    </el-button>
                </el-col>
    </temlate>
    

      js代码

    <script>
         copyText() {
             let imgData ='data:image/png;base64,'+this.initdata.participantQRCode
            //let imgData ="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAWgAAAFoAQAAAABSnlx4AAABe0lEQVR42u3aS5KEIAyA4bjyGBxVjsoxXMk0JpC22rJndmTqd2G17ecqPEJA6l8uQaPRaDQajUZH0YfYtdaaU3tMu8hW+t8bOpDW57K2Xw2et7Je3qKD6BblrWkNdZFFP361BnRM/erF0uBoCOiw2t7ktC/oqNpD3WBOvxy/0fPpnikdFn69fcur0PNpv1rkNdQj3g/rHfR82vputfzoXMa0Tj1yJnQoXfvixT+xnOlmREZPq9ubtWrk7dcZ/rEuRcfSvSu/fyyXYRkdQlu6tNrEKt4Q0n6bKaGn1RrqqlOs57/WJNBx9DmxdpjqR3kBHUdbVqS5ri1OF9V5jNLoEHoMwWNXZdTk9QU6jH6fYq0DV59nj4cqEXo2fan4VS8q+OYnOo7ulfiRGqk57vs8emrtu52pF42sCH8zu6IjaAt1lpH/lofIo2fWti41vcv3Mwvo6bSf9Cpdb76/gg6kPVPSUwhaJTp3VR7zKvRsmvPfaDQajUaj0f9G/wAuF0qW7lRCOwAAAABJRU5ErkJggg==";//这里放需要下载的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");
            console.log("点击下载",evt)
            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});
          }
    </script>
    

      

  • 相关阅读:
    Linux mail命令详解
    Linux 硬件RAID详解系统功能图
    Linux 下Discuz论坛的搭建
    Linux 下Wordpress博客搭建
    运维监控---企业级Zabbix详解_【all】
    Linux下的Mysql的双向同步
    Linux下的Mysql的主从备份
    实参时丢弃了类型 discards qualifiers discards qualifiers问题
    Qt::ConnectionType(信号与槽的传递方式)
    Qt多线程编程总结(一)
  • 原文地址:https://www.cnblogs.com/Jerry1208/p/12197637.html
Copyright © 2020-2023  润新知