使用FetchAPI下载PDF文件时出现文件损坏问题排查

存在的错误与遗漏 #

• responseType配置位置错误：responseType是Fetch API的顶层请求配置选项，不属于请求头headers的范畴，你把它放在headers里完全无效，无法让Fetch正确识别并处理二进制响应。
• 请求头Content-Type设置错误且冗余：你的请求是GET类型，GET请求没有请求体，设置Content-Type没有意义；如果要告知服务器你期望接收PDF格式的响应，应该设置Accept: application/pdf请求头（Content-Type用于声明发送的请求体类型，而非期望的响应类型）。
• 未验证响应状态：服务器返回application/json的Content-Type，大概率是请求出错（比如文件不存在、权限不足），服务器返回了JSON格式的错误信息。你未先检查响应是否成功，直接把错误JSON转成Blob，相当于把错误数据当成了PDF二进制内容，必然导致文件损坏。
• Promise链嵌套冗余：response.blob()返回Promise，无需嵌套then，链式写法更简洁，也便于统一捕获错误。

修正后的代码 #

const testApiURL = "http://localhost:5288/api/files/download/?fileUrl=location/500-KB.pdf";
function clickHandle() {
    fetch(testApiURL, {
        headers: { "Accept": "application/pdf" }, // 替换为正确的Accept请求头
        responseType: "blob" // 直接配置响应类型为blob
    })
    .then(response => {
        // 先校验响应是否成功
        if (!response.ok) {
            throw new Error(`请求失败：${response.status}`);
        }
        return response.blob();
    })
    .then((blob) => {
        const fileURL = window.URL.createObjectURL(blob);
        const alink = document.createElement("a");
        alink.href = fileURL;
        alink.download = "MyFile.pdf";
        alink.click();
        // 下载完成后释放URL对象，避免内存泄漏
        window.URL.revokeObjectURL(fileURL);
    })
    .catch(error => {
        console.error("下载失败：", error);
        // 可在此处添加用户提示逻辑
    });
}

额外说明 #

• 直接设置responseType: "blob"比先转arraybuffer再转Blob更高效；
• 调用window.URL.revokeObjectURL(fileURL)能避免长期持有URL对象造成的内存泄漏；
• 如果服务器仍返回JSON响应，需排查后端API是否正确处理了Accept头，或是否存在文件路径、权限等问题。

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