出售域名 11365.com.cn
有需要请联系 16826375@qq.com
在手机上浏览
在手机上浏览

js应用-base64转文件并下载

发布日期:2022-08-31

base64编码可由后端转化,前端进行post请求,这是代替流输出的一种办法。

这样可以用于Post输出并下载文件,Post可以传输多达2G的内容,所以不用担心文件大小的问题!

<html>
    <head>
        <title>js-base64转文件 demo</title>
    </head>
    <body>
        <input type="button" value="点击下载" id="btnDownload" />
    </body>
</html>
<script>
    let utils={        
        dataURLtoBlob: function(dataurl) { //将base64转换为blob
            let arr = dataurl.split(','),
                mime = arr[0].match(/:(.*?);/)[1],
                bstr = atob(arr[1]),
                n = bstr.length,
                u8arr = new Uint8Array(n);
                
            while (n--) {
                u8arr[n] = bstr.charCodeAt(n);
            }

            return new Blob([u8arr], { type: mime });
        },        
        blobToFile: function(theBlob, fileName){ //将blob转换为file
            theBlob.lastModifiedDate = new Date();
            theBlob.name = fileName;
            return theBlob;
        },
        downloadFile:function(url,name='test'){
            let a = document.createElement("a")
            a.setAttribute("href",url)
            a.setAttribute("download",name)
            a.setAttribute("target","_blank")

            let clickEvent = document.createEvent("MouseEvents");
            clickEvent.initEvent("click", true, true);  
            a.dispatchEvent(clickEvent);
        },
        downloadFileByBase64:function(base64,name){
            let myBlob = this.dataURLtoBlob(base64)
            let myUrl = URL.createObjectURL(myBlob)
            this.downloadFile(myUrl,name)
        }
    }

    document.getElementById("btnDownload").onclick=function(){
        let base64Data="data:application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;base64,UEsDBBQAAAAIAFSsjFQxSZgR8gAAANMCAAALAAAAX3JlbHMvLnJlbHOs0kFOwzAQBdCrWN43kxaEEKrbDZvuEOICxp4kVmKPZU8gnI0FR IKWEKCtiqhiy5t//l i/l8/1hvJz IF0zZUVByWdVSYDBkXWiVHLlZ3MrtZv2Ig aSyJ2LWZSRkJXsmOMdQDYdep0rihjKS0PJay7H1ELUptctwqqubyDtd8jDTrGzSqadXUrx9BbxnG5qGmfwnszoMfCJL44SpVmnFlnJaYBXSv0zUV VUingNGZ1SQxOjMGiXcRU5hM7zL8iS ahXGfQMc6Sri5JMmNm8vOg78ys6fp809/7AB5ZW80aDCX8x1QSPyI4WM3NlwADAFBLAwQUAAAACABUrIxUxL9OQEYBAACVBAAAEwAAAFtDb250ZW50X1R5cGVzXS54bWyslE1OwzAQha8SeYsSFxYIoaZdAFuoBBcw9qSxGv/IMynt2VhwJK7AJKVFoNIftSvLnvfe92xF Xz/GI4XrsnmkNAGX4rLYiAy8DoY66elaKnKb8R4NHxZRsCMpR5LURPFWylR1 AUFiGC50kVklPE2zSVUemZmoK8GgyupQ6ewFNOXYYYDe hUm1D2cOCj1fYBA2K7G4l7FilUDE2ViviuZx784eSfxMKdvYarG3ECxaITG5F9KN/CWvjE79EsgayiUr0qBzLpAl6kkJEyYZid8yWoqGqrAbOaB1bCugaGTB55EhIZOGn9U64DgmOp6 fqXMfj2yRgjv5yquYQ mLRmKtEphnSvwN4sl4jAmUwRqAXFP8yt5bhJYNnL1BH7oP/RbS7DWE2dmvz2vhlPWHFOjVKPvl8sxNNvmbIrL/yYy BBBgAFBLAwQUAAAACABUrIxUzDsD0uUAAACvAQAAEAAAAGRvY1Byb3BzL2FwcC54bWydkT9vAjEMxfdK/Q6n7MXXDh1QCKpgaKWqReLPHiU LmouiRKD4NvXHOKg6sbo915 dmw5PXS 2mMuLoaJeB7VYqoeH Qix4SZHJaKA6GM9zQRLVEaAxTTYqfLiBOBzSbmThOXeQuxaZzBeTS7DgPBS12/go3mRCub1TFhEWfevTA8EAaL9ikNAwqet6rk0miPM1ZVo31BCVeh9z9d CnrtIpzTXjJ/BXPnFZntNx14AxC77/zL7I/vZu1OmzRXnL/jT7/lpJ3RhPvV30tvj8k3Cp9hNlLNLvs6KhqCbclnwKut1C/UEsDBBQAAAAIAFSsjFRAJdXNBwEAAOcBAAARAAAAZG9jUHJvcHMvY29yZS54bWyskc1KxDAUhV lZN/epi0ioe0sFEHwZ8ABxV1I78wUmzQkd z4bC58JF/BtNaK4tJdcu93Pk7I  tbuTrqLnpG59veVIwnKYvQqL5pza5iB9rGp2xVl6p3uHa9RUct ihkjBfKVmxPZAWAV3vU0ieBMGG57Z2WFK5uB1aqJ7lDyNL0BDSSbCRJGIWxXYxsVjZqUdqD6yZBowA71GjIA084fLOETvs/A9NmIY  XahhGJIhn7jQiMPD9dXdVD5ujSdpFM6p/3tbXc5VhXIoCZsoFBL0YrFiX5v7/Ox8c8HqLM2yOC1inm14LvJCFPyxhF/5Ufh57l19s769HIllUMLP36o/BBBgAFBLAwQUAAAACABUrIxUM4qY AkBAAA AgAAEwAAAGRvY1Byb3BzL2N1c3RvbS54bWytkk9Lw0AQxe C32HZe7KbLVETmhSbVPGiPUjvSzIxgeyf7m6jRfzubhq1goIiHt/M8Jv3mJkvnkSPBjC2UzLDUUjxIj89mW jdG2UBuM6sMjPSJvh1jmdEmKrFgS3oW9L32mUEdx5aR6I1QZ4bVsAJ3rCKD0jgncST4R0cL BqKbpKihVtRMg3USpVTX6sZv7vQb7zttGf VVO uUCPRHRuxTIzTmfqvtUSNcV2f4uYyLsoxpHLBVUgQRjZZBMkvOA3pBKVuy4iq5XL1gpMdhhpHkAjJ8DRIMd8pMYI8eXNrrR tMfru u5mToz5sJp9W/4 X2RcvaDMd htPLIzD CdTB338i/wVUEsDBBQAAAAIAFSsjFRKnBc70wAAAJwBAAAUAAAAeGwvc2hhcmVkU3RyaW5ncy54bWyN0EFqwzAQBdCriNk3crIwIUgyJZBlVs0BhD21VayRo5FNc4LkCDlAb9FFT N1r1C1ULorXg3DvJkP8/n oapX34sJI7tAGtarAgRSHRpHrYbT0 FhC4KTpcb2gVDDBRlEZRRzEnmVWEOX0rCTkusOveVVGJDy5DlEb1NuYyt5iGgb7hCT7 WmKErprSMQdRgpaShBjOTOI 5/ xzgjPqJ2PFg65ycbzDGCcGccj1aj0omo Q3/Ac/tsvcCwfqcZldbxex Xaf366L6Kb4YzL/1nwBUEsDBBQAAAAIAFSsjFTLh6yErwEAAAkEAAANAAAAeGwvc3R5bGVzLnhtbK2TTW/jIBCG/wri3mBb3aqNbPewUqqe20p7JTA4aPmwgET2/vodjLNJ1UOrak8zvMw8MzDQPk7WkBOEqL3raL2pKAEnvNRu6Ojb6 7mnpKYuJPceAcdnSHSx76NaTbwcgBIBAEudvSQ0rhlLIoDWB43fgSHO8oHyxMuw8DiGIDLmJOsYU1V3THLtaOFsLXiKxDLw /jeCO8HXnSe210mhcWJVZsnwfnA98bbHSqb7kgU30XGjKFc5FF/VDHahF89CptkMu8UlrAx3Yf2APj4kJC8vdI9Q9WNe/OPoVvkm5ZgJPOw6N96452Z1Mkwh9d6miFElu1vlXeXbZqWgQc5B9y4gaVmrK Fd74QLSTMIHs6H3WHLdQYn5yo/dBZ1Fxq81c5CYLS9trnNU4hSyyUmMxuQVtzL8WGlqEvsVBJghuhwuy q/ziCN0 OIKZon7JFriy3gKfL7KWAwW3vsg8Ylfn75IfWtAJUwIejhkm/zI8mZKeOl9KzUfvOMmI88Zq4NYAca85I/wS71jT4qUa3 WeQokH//sYkOrWzDrYlLFyYWusaXI/ cvaHb5xf1fUEsDBBQAAAAIAFSsjFQ EQCUVAEAAGYDAAAPAAAAeGwvd29ya2Jvb2sueG1spZNfb8IgEMC/CuFdgW42S2P1YcsS38z vVOKlligOajWb7 rrnaLL8YlwB25u98dcMyXna3JXkMw3uVUTDkl2ilfGrfN6efH6 SJkhClK2Xtnc7pUQe6XMwPHnaF9zuC4S7ktIqxyRgLqtJWhqlvtEPLxoOVEbewZaEBLctQaR1tzRLOU2alcfRMyOAWht9sjNIvXrVWu3iGgK5lxOJDZZow0Ky6BWcl7NpmorxtEFGY2sTjCUqJVdlq6zzIosZDd2JGOsCR4hQcl2TIhKarVNYo8MFv4hTRP0VfnV9wJsSfK jgTtIjXsLe9C84otI7WemFlY4wwf9NE3zEJXfSZhdaQscWXAORbfTP IqgQ1gbFVtUsJkpW8x7jy jD2EM6LckyuKt75ucppz3juyX5ynnIImTFnvgvdcFfoZersoeTyAzqMCqfMB62MkySIxmQ8LFN1BLAwQUAAAACABUrIxU7ONcBdYAAAApAgAAGgAAAHhsL19yZWxzL3dvcmtib29rLnhtbC5yZWxzrJFBbsIwEEWvYs2eOAGpqioMGzZsaS9gOZM4SmJbM0NbztYFR IKNSwokVDFgpU1Y/v9Z8/p57hcf4 D kTiLgYDVVGCwuBi3YXWwF6a2SusV8sdDlbyCfZdYpWvBDbgRdKb1uw8jpaLmDDknSbSaCWX1OpkXW9b1POyfNF0y4ApU21rA7StK1Afh4SPsGPTdA430e1HDHInQrO3hPW7UH4LZ7ClFsXApF1kKih932b VBs5DHircan/zV88M/8rUs8eUf4Urq3zX WlutroycBXvwIMAFBLAwQUAAAACABUrIxUFikn4/cBAAC0BAAAGAAAAHhsL3dvcmtzaGVldHMvc2hlZXQxLnhtbJ2U227bMAyGX0XQfSMfkqwNbBfbim69GDY0O1zLsmwLkURDUk57 tFO4xrpLooANkCa1PdTJOHs/mA02UnnFdicxrOIEmkFVMo2Of318/HmlhIfuK24BitzepSe3hfZHtzGt1IGguetz2kbQrdizItWGu5n0EmLkRqc4QFd1zDfOcmr4ZDRLImiJTNcWXoirNx7GFDXSsgHEFsjbThBnNQ8YPW VZ0/04x4D85wt9l2NwJMh4hSaRWOA5QSI1ZPjQXHS423PsRzLsjB4ZPgm55lhu9vlIwSDjzUYYbkl5rfXv O3TEuRpK7DhPPsQE71Y/vFZVcyVqMrOQVll4JW46wlBZZpXBivUOcrHP6MaasyIbs30ru/cQmgZdrqaUIssKNxPVrYf 81dKN3vdt0MrK9dGUoP3wuZI13 rwxanqM2g45YreekLKck7JXwCzFrwfZxzhmvcrXAJses0 J8Iq2VjF1D5X9ziszg9HSu4lqvxRVWhzejuqP8P q1RNG1BiMV7wgQdeZA72ZKiqyERvYAcI5nn0d0WUsR0qipfYp2ksHmMMGSMoGUHJJDm5AE1j6f9B6QhKJ8nzC9A0trgAsck1O97Ib9w1ynqiZY1notkHStypK4MdoBusBSUlhADm7LW4QP2Uoxmq1QDh7GAn2fjHKf4BUEsBAjMAFAAAAAgAVKyMVDFJmBHyAAAA0wIAAAsAAAAAAAAAAAAAAAAAAAAAAF9yZWxzLy5yZWxzUEsBAjMAFAAAAAgAVKyMVMS/TkBGAQAAlQQAABMAAAAAAAAAAAAAAAAAGwEAAFtDb250ZW50X1R5cGVzXS54bWxQSwECMwAUAAAACABUrIxUzDsD0uUAAACvAQAAEAAAAAAAAAAAAAAAAACSAgAAZG9jUHJvcHMvYXBwLnhtbFBLAQIzABQAAAAIAFSsjFRAJdXNBwEAAOcBAAARAAAAAAAAAAAAAAAAAKUDAABkb2NQcm9wcy9jb3JlLnhtbFBLAQIzABQAAAAIAFSsjFQzipj4CQEAAD4CAAATAAAAAAAAAAAAAAAAANsEAABkb2NQcm9wcy9jdXN0b20ueG1sUEsBAjMAFAAAAAgAVKyMVEqcFzvTAAAAnAEAABQAAAAAAAAAAAAAAAAAFQYAAHhsL3NoYXJlZFN0cmluZ3MueG1sUEsBAjMAFAAAAAgAVKyMVMuHrISvAQAACQQAAA0AAAAAAAAAAAAAAAAAGgcAAHhsL3N0eWxlcy54bWxQSwECMwAUAAAACABUrIxUPhEAlFQBAABmAwAADwAAAAAAAAAAAAAAAAD0CAAAeGwvd29ya2Jvb2sueG1sUEsBAjMAFAAAAAgAVKyMVOzjXAXWAAAAKQIAABoAAAAAAAAAAAAAAAAAdQoAAHhsL19yZWxzL3dvcmtib29rLnhtbC5yZWxzUEsBAjMAFAAAAAgAVKyMVBYpJ P3AQAAtAQAABgAAAAAAAAAAAAAAAAAgwsAAHhsL3dvcmtzaGVldHMvc2hlZXQxLnhtbFBLBQYAAAAACgAKAIACAACwDQAAAAA=";
        utils.downloadFileByBase64(base64Data,'abc.xlsx');
    }

</script>