如何解决JavaScript中handleDownload函数下载文件损坏的问题？

你的代码里有两个核心问题导致下载的文件损坏，修正后就能解决：

1. 没必要把fetch拿到的Blob再重新包装成新的Blob，这会破坏原始文件的格式和类型信息，直接用获取到的Blob就行
2. 没检查请求是否成功，要是请求返回404、500这类错误，照样会生成无效文件

下面是修正后的代码：

function handleDownload() {  
    const domain = window.location.origin;
    const url = `${domain}/images/athar.pdf`;
    fetch(url)
        .then(response => {
            // 先确认请求成功
            if (!response.ok) {
                throw new Error(`请求失败，状态码：${response.status}`);
            }
            return response.blob();
        })
        .then(blob => {
            const blobURL = window.URL.createObjectURL(blob);
            const filename = 'athar.pdf';
            const aTag = document.createElement('a');
            
            aTag.href = blobURL;
            aTag.setAttribute('download', filename);
            // 可选：指定MIME类型，帮助浏览器识别文件
            aTag.type = blob.type;
            
            document.body.appendChild(aTag);
            aTag.click();
            aTag.remove();
            // 释放Blob URL，避免内存浪费
            window.URL.revokeObjectURL(blobURL);
        })
        .catch(e => console.error('下载出错：', e));
}

几个关键的修正点：

• 先验请求状态：用response.ok过滤掉错误响应，不会用无效数据生成文件
• 直接用原始Blob：去掉多余的new Blob([blob])，保留原始文件的完整数据
• 释放内存：调用revokeObjectURL清理Blob URL，避免长期运行内存泄漏
• 兼容优化：可选设置aTag.type，让浏览器更准确识别文件类型，提升下载兼容性

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