將服務器返回的文件轉換為 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); }