下载图片vue兼容火狐

偏执的太偏执、 2023-05-28 12:59 34阅读 0赞

<template>
        <div>
            <el-button @click='download()'>下载</el-button>
        </div>
    </template>
    
    <script>
    export default {
        name: 'dashboard',
        data() {
            return {
    
            };
        },
        methods: {
            //下载图片
          download() {
             console.log('下载')
            let imgData = '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 不加后两个参数下会报错  事件类型，是否冒泡，是否阻止浏览器的默认行为
            aLink.download = fileName;
            aLink.href = URL.createObjectURL(blob);
            // aLink.dispatchEvent(evt);
           // aLink.click()
            aLink.dispatchEvent(new MouseEvent('click', {bubbles: true, cancelable: true, view: window}));//兼容火狐
          },
          //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>
    
    
    <style scoped>
    .el-row {
        margin-bottom: 20px;
    }
    
    .grid-content {
        display: flex;
        align-items: center;
        height: 100px;
    }
    
    .grid-cont-right {
        flex: 1;
        text-align: center;
        font-size: 14px;
        color: #999;
    }
    
    .grid-num {
        font-size: 30px;
        font-weight: bold;
    }
    
    .grid-con-icon {
        font-size: 50px;
        width: 100px;
        height: 100px;
        text-align: center;
        line-height: 100px;
        color: #fff;
    }
    
    .grid-con-1 .grid-con-icon {
        background: rgb(45, 140, 240);
    }
    
    .grid-con-1 .grid-num {
        color: rgb(45, 140, 240);
    }
    
    .grid-con-2 .grid-con-icon {
        background: rgb(100, 213, 114);
    }
    
    .grid-con-2 .grid-num {
        color: rgb(45, 140, 240);
    }
    
    .grid-con-3 .grid-con-icon {
        background: rgb(242, 94, 67);
    }
    
    .grid-con-3 .grid-num {
        color: rgb(242, 94, 67);
    }
    
    .user-info {
        display: flex;
        align-items: center;
        padding-bottom: 20px;
        border-bottom: 2px solid #ccc;
        margin-bottom: 20px;
    }
    
    .user-avator {
        width: 120px;
        height: 120px;
        border-radius: 50%;
    }
    
    .user-info-cont {
        padding-left: 50px;
        flex: 1;
        font-size: 14px;
        color: #999;
    }
    
    .user-info-cont div:first-child {
        font-size: 30px;
        color: #222;
    }
    
    .user-info-list {
        font-size: 14px;
        color: #999;
        line-height: 25px;
    }
    
    .user-info-list span {
        margin-left: 70px;
    }
    
    .mgb20 {
        margin-bottom: 20px;
    }
    
    .todo-item {
        font-size: 14px;
    }
    
    .todo-item-del {
        text-decoration: line-through;
        color: #999;
    }
    
    .schart {
        width: 100%;
        height: 300px;
    }
    </style>