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>

  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM