图片下载脚本PC端正常 点击按钮移动端浏览器无响应

失效核心原因 #

• 多数移动端浏览器（包括Safari、微信/QQ等内置浏览器、安卓原生浏览器）对download属性的支持存在限制，仅同源资源可触发下载，跨域场景下download属性会被忽略
• 异步请求（XMLHttpRequest回调）中触发的DOM点击事件脱离了用户主动交互的上下文，会被浏览器的安全策略拦截
• 部分低版本移动端浏览器对Blob URL的创建、释放逻辑存在兼容问题
• 原始调用代码中onclick属性值未包裹引号，部分移动端浏览器解析HTML属性时会出错，导致函数未触发

修复后的兼容代码 #

函数代码 #

function forceDownload(url, fileName) {
    // 识别特殊浏览器环境
    const isIOS = /iphone|ipad|ipod/.test(window.navigator.userAgent.toLowerCase());
    const isWechat = /micromessenger/.test(window.navigator.userAgent.toLowerCase());
    const supportDownload = 'download' in document.createElement('a');

    // 微信内置环境/不支持download属性的iOS环境走兜底：直接打开图片引导长按保存
    if (isWechat || (isIOS && !supportDownload)) {
        window.open(url, '_blank');
        return;
    }

    const xhr = new XMLHttpRequest();
    xhr.open("GET", url, true);
    xhr.responseType = "blob";
    xhr.onload = function() {
        const urlCreator = window.URL || window.webkitURL;
        const imageUrl = urlCreator.createObjectURL(this.response);
        const tag = document.createElement('a');
        tag.style.display = 'none';
        tag.href = imageUrl;
        tag.download = fileName || 'download';
        document.body.appendChild(tag);
        // 延迟触发避免浏览器拦截
        setTimeout(() => {
            tag.click();
            document.body.removeChild(tag);
            urlCreator.revokeObjectURL(imageUrl);
        }, 10);
    }
    xhr.onerror = function() {
        // 请求失败走兜底逻辑
        window.open(url, '_blank');
    }
    xhr.send();
}

HTML调用代码 #

<button onclick="forceDownload('https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/1200px-Image_created_with_a_mobile_phone.png','Test')" type="button">Download</button>

额外注意事项 #

• 跨域图片资源需要服务端配置正确的Access-Control-Allow-OriginCORS响应头，否则Blob读取会失败
• 封闭内核的内置浏览器（比如微信、抖音内置浏览器）默认禁用下载能力，该场景下只能引导用户跳转至系统浏览器操作
• iOS端所有浏览器都基于WebKit内核，对download属性的限制较多，兜底的长按保存是目前兼容性最好的方案

内容的提问来源于stack exchange，提问作者SimpleGuy_