将服务器返回文件转为Blob并下载失败，求排查（支持多文件类型）

我正尝试将服务器返回的文件转换为Blob并下载，但操作未达预期，文件类型可能为图片、PDF或Doc。

服务器响应示例：

我编写的代码如下：

$http.get('url', { headers: {'Content-Type': undefined} }).then(function (response) { 
    var blob = new Blob([response.data], { type: 'image' }), 
        url = $window.URL || $window.webkitURL; 
    $scope.fileUrl = url.createObjectURL(blob); 
}).catch(function(error) { }); 

请问代码中哪里出错导致无法正常工作？

嘿，我来帮你排查下代码里的问题，这几个点是导致下载失败的关键：

• 没有指定正确的响应类型：$http默认会把响应解析成JSON或文本格式，但二进制文件（图片、PDF、Doc这类）需要直接拿到原始的二进制数据。你得设置responseType: 'blob'（或者'arraybuffer'），不然response.data会是被错误解析后的字符串，转成Blob也会损坏文件。
• 硬编码Blob的type为'image'：你的需求是支持多种文件类型，硬写type: 'image'会让PDF、Doc这类文件无法被浏览器正确识别，应该从服务器返回的Content-Type响应头里获取真实的文件类型。
• 缺少触发下载的实际逻辑：代码里只是创建了ObjectURL，但没有触发浏览器的下载动作——用户看不到任何下载提示，自然觉得操作没生效。

这里给你修正后的完整代码，包含了所有必要的改进：

$http.get('url', { 
    headers: {'Accept': '*/*'}, // 告诉服务器我们接受所有类型的文件
    responseType: 'blob' // 直接获取Blob类型的响应数据
}).then(function (response) { 
    // 从响应头提取真实的文件类型，兜底用通用二进制类型
    var contentType = response.headers('Content-Type') || 'application/octet-stream';
    var blob = new Blob([response.data], { type: contentType }); 
    var url = $window.URL || $window.webkitURL; 
    var fileUrl = url.createObjectURL(blob);

    // 模拟a标签点击触发下载
    var downloadLink = document.createElement('a');
    downloadLink.href = fileUrl;
    // 可以从Content-Disposition头提取文件名，这里先设默认值
    downloadLink.download = 'downloaded-file'; 
    document.body.appendChild(downloadLink);
    downloadLink.click();
    document.body.removeChild(downloadLink);
    url.revokeObjectURL(fileUrl); // 及时释放URL资源，避免内存泄漏
}).catch(function(error) { 
    console.error('文件下载失败:', error);
}); 

额外补充个小技巧：如果服务器返回了Content-Disposition响应头，你可以解析它来获取服务器指定的文件名，替换上面的默认文件名：

var disposition = response.headers('Content-Disposition');
var filename = 'downloaded-file';
if (disposition) {
    // 正则匹配文件名部分
    var filenameMatches = disposition.match(/filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/);
    if (filenameMatches && filenameMatches[1]) { 
        filename = decodeURIComponent(filenameMatches[1].replace(/['"]/g, ''));
    }
}
// 然后把downloadLink.download设为这个filename即可

最后要确认服务器端正确设置了Content-Type和Content-Disposition响应头，这是客户端能正确处理文件的前提哦。

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