IE에서 BLOB 다운로드가 작동하지 않습니다.
CSV 파일을 다운로드하는 Angular.js 컨트롤러에는 다음과 같은 기능이 있습니다.
var blob = new Blob([csvContent.join('')], { type: 'text/csv;charset=utf-8'});
var link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
link.href = URL.createObjectURL(blob);
link.download = 'teams.csv';
link.click();
이것은 Chrome에서는 완벽하게 동작하지만 IE에서는 동작하지 않습니다.브라우저 콘솔로그에 다음과 같이 표시됩니다.
HTML7007: 하나 이상의 BLOB URL이 생성된 BLOB를 닫아서 해지되었습니다.URL을 지원하는 데이터가 해방되었기 때문에 이러한 URL은 더 이상 해결되지 않습니다.
그 의미와 수정 방법은 무엇입니까?
다음 방법으로 시도해 보십시오.this
또는useragent
if (navigator.appVersion.toString().indexOf('.NET') > 0)
window.navigator.msSaveBlob(blob, filename);
else
{
var blob = new Blob(['stringhere'], { type: 'text/csv;charset=utf-8' });
var link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
link.href = URL.createObjectURL(blob);
link.download = 'teams.csv';
link.click();
}
IE에서는 블롭을 직접 열 수 없습니다.사용하셔야 합니다.msSaveOrOpenBlob
그리고 또...msSaveBlob
if (window.navigator && window.navigator.msSaveOrOpenBlob) {
window.navigator.msSaveOrOpenBlob(blob, fileName);
} else {
var objectUrl = URL.createObjectURL(blob);
window.open(objectUrl);
}
변환된 Base64 PNG 이미지를 다운로드하기 위해 Blob을 사용해야 했습니다.IE11에서 blob을 정상적으로 다운로드 할 수 있었습니다.window.navigator.msSaveBlob
다음 msdn 링크를 참조하십시오.http://msdn.microsoft.com/en-us/library/hh779016(v=vs.85).aspx
구체적으로는, 다음의 연락처로 문의해 주세요.
window.navigator.msSaveBlob(blobObject, 'msSaveBlob_testFile.txt');
어디에blobObject
일반적인 방법으로 만들어진 블럽입니다.
Chrome, Internet Explorer Firefox 및 Opera를 위한 완벽한 솔루션
이 페이지에는 좋은 부분이 많이 있지만, 모든 것을 작동시키기 위해 몇 가지를 조합해야 했습니다.이게 도움이 됐으면 좋겠네요.
- 버튼 또는 링크를 사용하여 다음 함수를 트리거합니다.
download()
:
<button class="button-no save-btn" ng-click="download()">DOWNLOAD</button>
- 이것을 컨트롤러에 넣습니다.
$scope.download = function () {
// example shows a JSON file
var content = JSON.stringify($scope.stuffToPutInFile, null, " ");
var blob = new Blob([content], {type: 'application/json;charset=utf-8'});
if (window.navigator && window.navigator.msSaveBlob) {
// Internet Explorer workaround
$log.warn("Triggering download using msSaveBlob");
window.navigator.msSaveBlob(blob, "export.json");
} else {
// other browsers
$log.warn("Triggering download using webkit");
var url = (window.URL || window.webkitURL).createObjectURL(blob);
// create invisible element
var downloadLink = angular.element('<a></a>');
downloadLink.attr('href', url);
downloadLink.attr('download', 'export.json');
// make link invisible and add to the DOM (Firefox)
downloadLink.attr('style','display:none');
angular.element(document.body).append(downloadLink);
// trigger click
downloadLink[0].click();
}
};
사용하시는 IE 브라우저 버전은 어떻게 되나요?최신 브라우저 또는 IE10+ http://caniuse.com/bloburls가 필요합니다.
좀 늦춰야 할 것 같아요.다음과 같은 경우:
link.click();
setTimeout(function(){
document.body.createElementNS('http://www.w3.org/1999/xhtml', 'a');
URL.revokeObjectURL(link.href);
}, 100);
Chrome과 IE11에서 작동하기 위해서는 다운로드 기능이 필요했습니다.나는 이 코드로 좋은 성공을 거두었다.
HTML
<div ng-repeat="attachment in attachments">
<a ng-click="openAttachment(attachment)" ng-href="{{attachment.fileRef}}">{{attachment.filename}}</a>
</div>
JS
$scope.openAttachment = function (attachment) {
if (window.navigator && window.navigator.msSaveOrOpenBlob) {
window.navigator.msSaveOrOpenBlob(
b64toBlob(attachment.attachment, attachment.mimeType),
attachment.filename
);
}
};
이런 식으로 해냈지, 날 위해 잘 일했지.
downloadFile(data) {
if (navigator.msSaveBlob) {
let blob = new Blob([data], {
"type": "text/csv;charset=utf8;"
});
navigator.msSaveBlob(blob, this.fileName);
}
else {
let blob = new Blob(['\ufeff' + data], { type: 'text/csv;charset=utf-8;' });
let $link = document.createElement("a");
let url = URL.createObjectURL(blob);
$link.setAttribute("target", "_blank");
$link.setAttribute("href", url);
$link.setAttribute("download", this.fileName);
$link.style.visibility = "hidden";
document.body.appendChild($link);
$link.click();
document.body.removeChild($link);
}
}
대신 var blob = file을 사용해 보십시오.슬라이스(0, file.size);
아래와 같이 polyfill 메서드를 만듭니다.내 경우는 다운로드 파일명이 정적이기 때문에, 가변 파일명을 가지고 있습니다.이 메서드는 Internet Explorer와 같이 blob 함수가 지원되지 않을 때 호출됩니다.
if (!HTMLCanvasElement.prototype.toBlob) {
Object.defineProperty(HTMLCanvasElement.prototype,
'toBlob', {
value: function (callback, type, quality) {
var canvas = this;
setTimeout(function () {
var binStr = atob(canvas.toDataURL(type, quality).split(',')[1]),
len = binStr.length,
arr = new Uint8Array(len);
for (var i = 0; i < len; i++) {
arr[i] = binStr.charCodeAt(i);
}
var blob = new Blob([arr], {
type: 'image/png'
});
window.navigator.msSaveOrOpenBlob(blob, fileName);
});
}
});
}
try {
const blob = new Blob([res.body], {
type: res.headers.get('Content-Type'),
});
const file = new File([blob], this.getFileName(res), {
type: res.headers.get('Content-Type'),
});
saveAs(file);
} catch (err) {
var textFileAsBlob = new Blob([res.body], {
type: res.headers.get('Content-Type'),
});
window.navigator.msSaveBlob(textFileAsBlob, this.getFileName(res));
}
파일명을 취득합니다.아래 기능을 사용합니다.
getFileName(response: any) {
let name: string;
try {
const contentDisposition: string = response.headers.get(
'content-disposition'
);
const [, filename] = contentDisposition.split('filename=');
name = filename;
} catch (e) {
name = 'File_Name_Not_Specified_' + new Date();
}
return name;
}
이건 나한테 효과가 있었어.
언급URL : https://stackoverflow.com/questions/20310688/blob-download-is-not-working-in-ie
'programing' 카테고리의 다른 글
AngularJS - 요소 속성 값을 가져옵니다. (0) | 2023.03.25 |
---|---|
한 페이지에 여러 개의 모달 상자 열기 (0) | 2023.03.25 |
공백 입력 시 ng-change를 트리거하려면 어떻게 해야 하나요? (0) | 2023.03.25 |
Oracle에서 GUID를 생성하는 방법 (0) | 2023.03.25 |
SpringBoot의 @MultipartConfig maxFileSize가 활성화되지 않음 (0) | 2023.03.25 |