WEB端常见几种下载方式分析

下载方式

window.open
通过a标签
通过iframe标签

以下是下载方式代码：

// 方式一 通过 window.open
window.open("下载地址")


// 方式二 通过 a 标签 
function download (src: string) {
        const a = document.createElement('a');
        a.download = src;
        a.href = src;
        a.click();
        setTimeout(() => {
            document.body.removeChild(a);
        }, 1000 * 60);
}


// 方式三 通过 iframe 标签 
function downLoadFile(src: string) {
    const iframe = document.createElement('iframe');
    iframe.src = src;
    iframe.id = 'iframe-downLoadFile-' + Date.now().toString(16);
    iframe.style.display = 'none';
    document.body.appendChild(iframe);
    setTimeout(() => {
        document.body.removeChild(iframe);
    }, 1000 * 60);

综合对比

下载方式	优点/缺点	建议使用场景
window.open	优点：可以适用于99%的场景缺点：1. 浏览器不刷新当前页面，会打开一个新的窗口加载下载地址，加载完成以后，很快关闭标签页，交互体验不好。2. 浏览器可能会阻止下载弹框，用户体验不友好。	可应用大部分下载场景
a标签加载url	优点：可以选用于99%的场景。缺点：浏览器会在当前窗口进行刷新动作，地址栏中的地址不变更，然后才会下载文件。浏览器可能会阻止下载弹框，用户体验不友好。	可应用于大部分下载场景，需要注意刷新当前页产生的影响，比如页面有websocket连接情况，会造成断开重连的。
iframe标签加载src	优点：静默方式下载，交互体验友好。缺点：当下载文件地址返回的状态码是302时，location的下载地址域名与主站不同时，会有浏览器跨域安全限制，不会下载文件。	打开浏览器默认的访问外部应用的提示弹框，如打开邮件应用，聊天应用。下载，注意下载地址与主站地址不同域的情况，浏览器会限制下载，存在跨域安全问题。