将服务器返回的文件转换为 blob 并下载

Question

我试图在 blob 中隐藏从服务器返回的文件并下载它，但我缺少 smth。 文件类型可以是图像、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) {
});        

我做错了什么，这没有按预期工作？

Answer 1

您只需要在anchor标记中直接使用 url

 <a ng-href="{{url}}" target='_blank'>Download</a>

---

如果上面的代码不起作用，请执行此操作。

 function success(response) { var data = response.data, blob = new Blob([data], { type: 'application/octet-stream; charset=UTF-8' }), url = $window.URL || $window.webkitURL, fileUrl = url.createObjectURL(blob); var anchor = document.createElement('a'); anchor.href = fileUrl; anchor.target = '_blank'; anchor.download = name; anchor.style = "display: none"; document.body.appendChild(anchor); anchor.click(); setTimeout(function() { document.body.removeChild(anchor); $window.URL.revokeObjectURL(fileUrl); }, 100); }

Answer 2

1. 首先将blob转换为base64格式

    var reader = new FileReader(); reader.readAsDataURL(blob); reader.onloadend = function() { var base64data = reader.result; console.log(base64data); }

2. 然后使用base64下载文件

    downloadFile(base64data, type, fileName) { const file = window.btoa(base64data); const url = `data:${fileType};base64,` + file; let a = document.createElement('a'); a.href = url; a.download = fileName; document.body.appendChild(a); a.click(); document.body.removeChild(a); window.URL.revokeObjectURL(url); }