js实现跨域下载，展示下载进度以及自定义下载名称功能

一、 下载进度

1. loading弹窗结构

// loading状态DOM
function setLoading() {let content = document.querySelector('.loading')content.innerHTML = ''content.innerHTML = `<div class="loading_content"><div class="contentBox"><div class="downloadTip"><div class="tips">下载成功！</div><div class="close"><img src="../img/img1/close.png" alt=""></div></div><div class="box"><div class="tip">预计下载时长10-15s, 请耐心等待</div><div class="progress-container"><div class="progress-bar"></div><div class="progress-text"></div><div class="particles"><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div><div class="particle"></div></div></div></div></div></div>`
}

2. loading弹窗样式

.loading_content{/* display: none; */position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.7);z-index: 5;font-size: 15px;
}.loading_content .contentBox {display: block;position: relative;left: 50%;top: 50%;transform: translateX(-50%) translateY(-50%);width: 337px;height: 168px;padding: 20px;background:  url("../img/dialog.png") no-repeat center;background-size: contain;
}.loading_content .contentBox .box ,
.loading_content .contentBox .downloadTip{width: 100%;height: 100%;display: flex;flex-direction: column;justify-content: flex-start;
}
.loading_content .contentBox .downloadTip {position: relative;display: none;color: #fff;
}
.loading_content .contentBox .downloadTip .close {position: absolute;cursor: pointer;top: 0;right: 0;width: 25px!important;height: 25px!important;
}
.loading_content .contentBox .downloadTip .close img {width: 100%;height: 100%;
}
.loading_content .contentBox .downloadTip .tips {position: relative;top: 50%;left: 50%;width: 100%;height: 50%;line-height: 84px;text-align: center;transform: translateX(-50%) translateY(-50%);font-size: 22px;
}.loading_content .contentBox .box .tip {width: 100%;text-align: center;line-height: 75px;color: #C9B387;
}.progress-container {position: relative;width: 100%;max-width: 500px;height: 20px;background: radial-gradient(circle, #1b2735, #090a0f);border-radius: 30px;overflow: hidden;box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);box-sizing: border-box;border: 1px solid #313131;}.progress-bar {position: absolute;top: 0;left: 0;height: 100%;background: linear-gradient(90deg, #c9b386, rgb(146, 24, 22));border-radius: 30px;animation: grow 7s ease-in forwards;box-shadow:0 0 15px #c9b386,0 0 30px rgb(146, 24, 22);}.progress-bar::before {content: "";position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 200%;height: 200%;background: radial-gradient(circle, rgba(255, 255, 255, 0.15), transparent);opacity: 0.5;animation: ripple 15s infinite;}.progress-text {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);font-size: 10px;font-weight: bold;letter-spacing: 1px;color: #fff;text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7);z-index: 2;}.particles {position: absolute;width: 100%;height: 100%;overflow: hidden;}.particle {position: absolute;width: 4px;height: 4px;background: #fff;border-radius: 50%;opacity: 0.6;animation: float 5s infinite ease-in-out;}@keyframes grow {0% {width: 0;}100% {width: 99%;}}@keyframes ripple {0% {transform: translate(-50%, -50%) scale(0.5);opacity: 0.7;}100% {transform: translate(-50%, -50%) scale(1.5);opacity: 0;}}@keyframes float {0% {transform: translateY(0) translateX(0);}50% {transform: translateY(-20px) translateX(10px);}100% {transform: translateY(0) translateX(0);}}.particle:nth-child(1) {top: 10%;left: 20%;animation-delay: 0s;}.particle:nth-child(2) {top: 30%;left: 70%;animation-delay: 1s;}.particle:nth-child(3) {top: 50%;left: 50%;animation-delay: 2s;}.particle:nth-child(4) {top: 80%;left: 40%;animation-delay: 1.5s;}.particle:nth-child(5) {top: 90%;left: 60%;animation-delay: 2.5s;}

3. 开始显示loading

// 开始动画
function loadingStart() {let text = document.querySelector('.progress-text')text.innerText = '0%'let flag = 0timer = setInterval(() => {if (text.innerText == '99%') {clearInterval(timer)return}flag += 7if (flag == 98) {flag = 99}let data = flagtext.innerText = `${data}%`}, 500)
}

4. 结束loading状态

}
// 结束动画
function loadingDone() {timer && clearInterval(timer)// 下载完成$('.progress-text').html('100%')$('.progress-bar').css('animation', 'unset')$('.progress-bar').css('width', '100%')setTimeout(() => {// 结果页面显示，loading页面隐藏$('.box').css('display', 'none')$('.downloadTip').css('display', 'block')$('.close').click(function () {$('.loading').html('')});}, 1500)
}

二、 跨域下载与 自定义名称

主要通过请求获取blob来进行下载

1. 获取blob

// 异步下载任务
function getBlob(url) {return new Promise(resolve => {try {const xhr = new XMLHttpRequest();xhr.open('GET', url, true);xhr.responseType = 'blob';xhr.onload = () => {if (xhr.status === 200) {resolve(xhr.response);} else {window.location.href = url;$('.loading').html('')}};xhr.send();} catch (error) {window.location.href = url;$('.loading').html('')}});
}

2. 下载与命名

function downloadHandler(blob, url, code) {let name = url.split('/').pop()var link = document.createElement('a');link.href = window.URL.createObjectURL(blob);if (code) {// .exe替换成code+.exelink.download = name.replace(/\.exe$/, '_' + code + '.exe')} else {link.download = name}link.click();
}