API文件下载问题：Blob生成的文件损坏无法打开

问题原因 #

API返回的file字段是Base64编码的字符串，你直接将其作为文本内容创建Blob，导致保存的文件实际是Base64文本而非原始二进制数据，因此ZIP文件损坏无法打开。

解决方案 #

需要先将Base64字符串解码为二进制数据，再用该数据创建Blob进行下载：

修改后的代码 #

if(tipo_societa == "Società di Capitali"){
    const id_visura = document.getElementById("id_visura").value;

    axios.get('https://visurecamerali.openapi.it/ordinaria-societa-capitale/' + id_visura + '/allegati', {
        headers:{
            'Authorization': 'Bearer ' + '{Token_Censored}'
        }
    })
    .then ( (res) => {
        const data = res.data.data;
        
        // 1. 解码Base64字符串为二进制数据
        const binaryStr = atob(data.file);
        const uint8Array = new Uint8Array(binaryStr.length);
        for(let i = 0; i < binaryStr.length; i++) {
            uint8Array[i] = binaryStr.charCodeAt(i);
        }

        // 2. 用二进制数据创建Blob，指定正确的MIME类型
        const blob = new Blob([uint8Array], { type: 'application/zip' });
        const url = window.URL.createObjectURL(blob);
        
        // 3. 触发下载
        const link = document.createElement('a');
        link.href = url;
        link.setAttribute('download', data.nome);
        document.body.appendChild(link);
        link.click();

        // 清理URL对象，避免内存泄漏
        window.URL.revokeObjectURL(url);
        document.body.removeChild(link);
    })
}

关键步骤说明 #

• Base64解码：用atob()将Base64字符串解码为二进制字符串，再转换为Uint8Array（浏览器可识别的二进制数组）
• 指定Blob的MIME类型：设置为application/zip，确保浏览器正确识别文件类型
• 资源清理：下载完成后释放URL对象，避免内存占用

验证提示 #

解码后可以对比uint8Array.length和API返回的dimensione值是否一致，确认解码过程没有出错。

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