移动端浏览器下载APK时出现文件扩展名错误问题求助

问题原因 #

S3返回的Content-Type为application/zip，通过XHR获取的Blob会继承这个MIME类型。移动端浏览器（Chrome、Firefox）在处理Blob下载时，会结合download属性的文件名和Blob的MIME类型自动调整扩展名，导致原本指定的product.apk被追加.zip后缀，变成product.apk.zip。

解决方案 #

创建Blob时手动指定APK对应的标准MIME类型application/vnd.android.package-archive，覆盖响应继承的类型，让浏览器正确识别文件类型。

修改后的代码：

const url = res.response.s3RetrieveUrl; // https://example.com/product.apk
const xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.responseType = 'blob';
xhr.onload = () => {
    console.log(xhr.getResponseHeader("Content-Type")); // 仍然是application/zip，但我们手动指定Blob类型
    setDownloadProgress(100);
    // 重新创建Blob并指定APK的MIME类型
    const blob = new Blob([xhr.response], { type: 'application/vnd.android.package-archive' });
    const downloadUrl = URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = downloadUrl;
    link.download = `product.apk`;
    link.click();
    URL.revokeObjectURL(downloadUrl);
}
xhr.send();

原理说明 #

APK的标准MIME类型是application/vnd.android.package-archive，手动指定后，移动端浏览器会根据这个类型识别文件为APK安装包，不再基于原application/zip类型追加错误后缀，同时桌面端的下载行为不受影响。

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