Android浏览器如何下载HTML页面内base64/blob格式图片

Android端浏览器下载失效核心原因是：多数国产定制浏览器、旧版Chrome/系统自带浏览器对a标签download属性的支持不完整，对JS模拟触发的下载事件有拦截规则，直接套用PC/iOS端的动态a标签下载逻辑大概率失效，可按下面优先级落地兼容方案：

优先方案：修正Blob下载逻辑适配Android规则 #

不要直接把base64字符串赋值给a标签href，先转成Blob生成临时Blob URL，同时避开Android浏览器的事件拦截规则，注意几个强制要求：

• 下载触发逻辑必须放在用户点击事件的同步执行链里，不要放在setTimeout、接口请求等异步回调中触发，否则会被判定为非用户主动操作直接拦截
• 动态创建的a标签必须临时插入到DOM树中再触发点击，部分Android浏览器不响应未挂载DOM元素的点击事件
• 不要用document.createEvent模拟鼠标事件的老写法，直接调用DOM元素原生的click()方法兼容性最好

对应可直接复用的代码：

// base64转Blob工具方法
function base64ToBlob(base64Str) {
  const parts = base64Str.split(',');
  const contentType = parts[0].match(/:(.*?);/)[1];
  const raw = window.atob(parts[1]);
  const rawLength = raw.length;
  const uint8Arr = new Uint8Array(rawLength);
  for (let i = 0; i < rawLength; i++) {
    uint8Arr[i] = raw.charCodeAt(i);
  }
  return new Blob([uint8Arr], { type: contentType });
}

/**
 * 触发图片下载
 * @param {HTMLCanvasElement|string} source canvas实例 或者 已生成的base64字符串
 * @param {string} fileName 下载后的文件名
 */
function triggerDownload(source, fileName = '导出图片.png') {
  let base64Str = typeof source === 'string' ? source : source.toDataURL('image/png');
  const blob = base64ToBlob(base64Str);
  const blobUrl = URL.createObjectURL(blob);
  const aTag = document.createElement('a');
  aTag.href = blobUrl;
  aTag.download = fileName;
  // 临时插入DOM
  document.body.appendChild(aTag);
  aTag.click();
  // 清理DOM和临时Blob地址，避免内存泄漏
  setTimeout(() => {
    document.body.removeChild(aTag);
    URL.revokeObjectURL(blobUrl);
  }, 100);
}

极端场景兜底方案：引导用户长按保存 #

部分深度定制的浏览器（比如老版本微信内置浏览器、部分厂商自带浏览器）会完全屏蔽JS触发的文件下载能力，没有前端API可以绕过，这种情况直接走兜底逻辑：

1. 检测到是Android环境时，先尝试执行上面的下载方法
2. 若执行后200ms内没有触发文件下载回调，直接在页面顶层弹出预览层，展示生成好的图片，给出明确提示：浏览器不支持自动下载，请长按图片选择「保存图片」到相册

必避的几个坑 #

• 不要直接用base64字符串作为a标签的href，长度超过2M时多数Android浏览器会直接截断无响应
• 不要用window.open(blobUrl)的方式触发下载，会被Android浏览器默认的弹窗拦截规则直接拦掉
• Blob的MIME类型必须和图片格式匹配，比如png图片要设置为image/png，类型错误会导致下载的文件无法正常打开
• 如果canvas绘制了跨域图片，必须先把图片转成本地Blob再绘制，否则canvas会触发跨域污染，toDataURL方法在Android端会直接抛出错误，比PC端校验严格很多

内容的提问来源于stack exchange，提问作者黃翊唐