Angular를 사용하여 파일을 다운로드하려면 어떻게 해야 합니까?JS 또는 Javascript?
숨겨진 텍스트 영역에 텍스트가 있습니다.버튼을 클릭했을 때 텍스트가 다운로드되도록 하고 싶다..txt파일입니다. Angular를 사용하여 가능합니까?JS 또는 Javascript?
다음과 같은 작업을 수행할 수 있습니다.Blob.
<a download="content.txt" ng-href="{{ url }}">download</a>
컨트롤러:
var content = 'file content for example';
var blob = new Blob([ content ], { type : 'text/plain' });
$scope.url = (window.URL || window.webkitURL).createObjectURL( blob );
URL 를 유효하게 하려면 , 다음의 순서에 따릅니다.
app = angular.module(...);
app.config(['$compileProvider',
function ($compileProvider) {
$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|tel|file|blob):/);
}]);
주의하시기 바랍니다.
createObjectURL()을 호출할 때마다 동일한 오브젝트에 대해 이미 작성한 경우에도 새로운 오브젝트 URL이 생성됩니다.이들 각각은 필요 없게 되었을 때 URL.revokeObjectURL()을 호출하여 해방해야 합니다.브라우저는 문서가 언로드될 때 자동으로 릴리스되지만 최적의 성능과 메모리 사용을 위해 언로드할 수 있는 안전 시간이 있는 경우 이 작업을 수행해야 합니다.
출처 : MDN
버튼을 클릭하면 다음 코드를 사용하여 다운로드 할 수 있습니다.
html로
<a class="btn" ng-click="saveJSON()" ng-href="{{ url }}">Export to JSON</a>인컨트롤러
$scope.saveJSON = function () {
$scope.toJSON = '';
$scope.toJSON = angular.toJson($scope.data);
var blob = new Blob([$scope.toJSON], { type:"application/json;charset=utf-8;" });
var downloadLink = angular.element('<a></a>');
downloadLink.attr('href',window.URL.createObjectURL(blob));
downloadLink.attr('download', 'fileName.json');
downloadLink[0].click();
};이거 드셔보세요
<a target="_self" href="mysite.com/uploads/ahlem.pdf" download="foo.pdf">
그리고 이 사이트를 방문하면 당신에게 도움이 될 수 있습니다:)
http://docs.angularjs.org/guide/
이것은 다른 브라우저 창을 열지 않고도 Javascript로 실행할 수 있습니다.
window.location.assign('url');
'url'을 파일 링크로 바꿉니다.이 기능을 함수에 넣고, 다음과 같이 호출할 수 있습니다.ng-click버튼에서 다운로드를 트리거해야 하는 경우
현재 작업 중인 프로젝트에서는 보이지 않는 iFrame이 있었고 다운로드 대화 상자를 표시하기 위해 파일 URL을 iFrame에 전송해야 했습니다.버튼 클릭 시 컨트롤러는 동적 URL을 생성하고 $scope 이벤트를 트리거합니다.여기서 커스텀은directive내가 썼어, 나열중이야.디렉티브는 iFrame이 아직 존재하지 않는 경우 본문에 iFrame을 추가하고 URL 속성을 설정합니다.
편집: 지시문 추가
appModule.directive('fileDownload', function ($compile) {
var fd = {
restrict: 'A',
link: function (scope, iElement, iAttrs) {
scope.$on("downloadFile", function (e, url) {
var iFrame = iElement.find("iframe");
if (!(iFrame && iFrame.length > 0)) {
iFrame = $("<iframe style='position:fixed;display:none;top:-1px;left:-1px;'/>");
iElement.append(iFrame);
}
iFrame.attr("src", url);
});
}
};
return fd;
});
이 디렉티브는 다음과 같은 컨트롤러 이벤트에 응답합니다.downloadFile
컨트롤러에서는
$scope.$broadcast("downloadFile", url);
설정할 수 있습니다.location.href사용자가 다운로드 할 데이터를 포함하는 데이터 URI로 이동합니다.이것 말고는 JavaScript만으로 할 수 있는 방법은 없다고 생각합니다.
안전하지 않아 파일을 다운로드하지 못할 경우에 대비하여 추가합니다.blob:null...다운로드 버튼 위에 마우스를 올리면 삭제해야 합니다.예를 들어.
var app = angular.pariousapp', [];
app.config(function($compileProvider)){
$compileProvider.aHrefSanitizationWhitelist(/^\s*(|blob|):/);
서버에 액세스 할 수 있는 경우는, 이 일반적인 질문의 회답에 따라서 헤더를 설정하는 것을 검토해 주세요.
Content-Type: application/octet-stream
Content-Disposition: attachment;filename=\"filename.xxx\"
이 답변의 코멘트를 읽어보려면 옥텟스트림보다 구체적인 Content-Type을 사용하는 것이 좋습니다.
저도 같은 문제가 있어서 여러 가지 해결책을 찾느라 많은 시간을 소비했습니다.이 게시물에 있는 모든 코멘트에 참여하겠습니다.도움이 되었으면 합니다.Internet Explorer 11, Chrome 및 Fire Fox에서 올바르게 테스트되었습니다.
HTML:
<a href="#" class="btn btn-default" file-name="'fileName.extension'" ng-click="getFile()" file-download="myBlobObject"><i class="fa fa-file-excel-o"></i></a>
지시:
directive('fileDownload',function(){
return{
restrict:'A',
scope:{
fileDownload:'=',
fileName:'=',
},
link:function(scope,elem,atrs){
scope.$watch('fileDownload',function(newValue, oldValue){
if(newValue!=undefined && newValue!=null){
console.debug('Downloading a new file');
var isFirefox = typeof InstallTrigger !== 'undefined';
var isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0;
var isIE = /*@cc_on!@*/false || !!document.documentMode;
var isEdge = !isIE && !!window.StyleMedia;
var isChrome = !!window.chrome && !!window.chrome.webstore;
var isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
var isBlink = (isChrome || isOpera) && !!window.CSS;
if(isFirefox || isIE || isChrome){
if(isChrome){
console.log('Manage Google Chrome download');
var url = window.URL || window.webkitURL;
var fileURL = url.createObjectURL(scope.fileDownload);
var downloadLink = angular.element('<a></a>');//create a new <a> tag element
downloadLink.attr('href',fileURL);
downloadLink.attr('download',scope.fileName);
downloadLink.attr('target','_self');
downloadLink[0].click();//call click function
url.revokeObjectURL(fileURL);//revoke the object from URL
}
if(isIE){
console.log('Manage IE download>10');
window.navigator.msSaveOrOpenBlob(scope.fileDownload,scope.fileName);
}
if(isFirefox){
console.log('Manage Mozilla Firefox download');
var url = window.URL || window.webkitURL;
var fileURL = url.createObjectURL(scope.fileDownload);
var a=elem[0];//recover the <a> tag from directive
a.href=fileURL;
a.download=scope.fileName;
a.target='_self';
a.click();//we call click function
}
}else{
alert('SORRY YOUR BROWSER IS NOT COMPATIBLE');
}
}
});
}
}
})
컨트롤러 내:
$scope.myBlobObject=undefined;
$scope.getFile=function(){
console.log('download started, you can show a wating animation');
serviceAsPromise.getStream({param1:'data1',param1:'data2', ...})
.then(function(data){//is important that the data was returned as Aray Buffer
console.log('Stream download complete, stop animation!');
$scope.myBlobObject=new Blob([data],{ type:'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'});
},function(fail){
console.log('Download Error, stop animation and show error message');
$scope.myBlobObject=[];
});
};
서비스 중:
function getStream(params){
console.log("RUNNING");
var deferred = $q.defer();
$http({
url:'../downloadURL/',
method:"PUT",//you can use also GET or POST
data:params,
headers:{'Content-type': 'application/json'},
responseType : 'arraybuffer',//THIS IS IMPORTANT
})
.success(function (data) {
console.debug("SUCCESS");
deferred.resolve(data);
}).error(function (data) {
console.error("ERROR");
deferred.reject(data);
});
return deferred.promise;
};
백엔드(스프링):
@RequestMapping(value = "/downloadURL/", method = RequestMethod.PUT)
public void downloadExcel(HttpServletResponse response,
@RequestBody Map<String,String> spParams
) throws IOException {
OutputStream outStream=null;
outStream = response.getOutputStream();//is important manage the exceptions here
ObjectThatWritesOnOutputStream myWriter= new ObjectThatWritesOnOutputStream();// note that this object doesn exist on JAVA,
ObjectThatWritesOnOutputStream.write(outStream);//you can configure more things here
outStream.flush();
return;
}
이것은 나에게 각도에서 효과가 있었다.
var a = document.createElement("a");
a.href = 'fileURL';
a.download = 'fileName';
a.click();
나는 정적 URL을 원하지 않았다.Ajax Factory는 모든 Ajax 작업을 담당합니다.저는 공장에서 url을 받아서 아래와 같이 바인딩을 하고 있습니다.
<a target="_self" href="{{ file.downloadUrl + '/' + order.OrderId + '/' + fileName }}" download="{{fileName}}">{{fileName}}</a>
감사합니다 @AhlemMustapha
언급URL : https://stackoverflow.com/questions/16514509/how-do-you-serve-a-file-for-download-with-angularjs-or-javascript
'programing' 카테고리의 다른 글
| created_at 컬럼에 ID가 자동으로 생성되는 것처럼 생성 날짜/시간을 자동으로 생성하도록 하려면 어떻게 해야 합니까? (0) | 2023.02.28 |
|---|---|
| 체크박스 이벤트핸들러의 'MouseEvent'가 범용이 아닌 이유는 무엇입니까? (0) | 2023.02.28 |
| 오류의 적절한 사용 (0) | 2023.02.28 |
| API를 비동기/Awit에서 'POST'로 가져오는 올바른 방법 (0) | 2023.02.28 |
| url을 통해 json 데이터를 가져와 python(simplejson)에서 사용 (0) | 2023.02.28 |