반응형
pdf 스트림을 angularjs로 읽는 방법
서버로부터 다음의 PDF 스트림을 받았습니다.
이 스트림을 AngularJS로 읽으려면 어떻게 해야 하나요?다음 코드를 사용하여 새 창에서 PDF 파일로 열려고 했습니다.
.success(function(data) {
window.open("data:application/pdf," + escape(data));
});
하지만 열려 있는 창에 내용이 보이지 않습니다.
컨트롤러 코드를 변경하여 이를 실현했습니다.
$http.get('/retrievePDFFiles', {responseType: 'arraybuffer'})
.success(function (data) {
var file = new Blob([data], {type: 'application/pdf'});
var fileURL = URL.createObjectURL(file);
window.open(fileURL);
});
다음 코드를 확인하십시오.
컨트롤러 측 -
$http.get(baseUrl + apiUrl, { responseType: 'arraybuffer' })
.success(function (response) {
var file = new Blob([response], { type: 'application/pdf' });
var fileURL = URL.createObjectURL(file);
$scope.pdfContent = $sce.trustAsResourceUrl(fileURL);
})
.error(function () {
});
HTML 측:
<div ng-controller="PDFController" class="modal fade" id="pdfModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content" onloadstart="">
<object data="{{pdfContent}}" type="application/pdf" style="width:100%; height:1000px" />
</div>
</div>
또한 Angular ng-pdfviewer를 사용하여 pdf 파일을 볼 수도 있습니다.
PDF 를 봐 주세요.JS. pdf 스트림을 가져와 클라이언트 측으로 렌더링할 수 있는 클라이언트 측 Javascript 라이브러리입니다.Angular는 pdf를 읽을 수 없으므로 이는 Angular 문제가 아닙니다.
Java: 메서드 가져오기
BLOB pdfData = getBlob_Data;
response.setContentType(pdfData.getContentType());
response.setHeader(ApplicationLiterals.HEADER_KEY_CONTENT, "attachment; filename=FileName.pdf");
response.getOutputStream().write(pdfData.getBinaryData());
response.getOutputStream().flush();
config.responseType을 사용할 때의 문제는 $http 서비스가 여전히 기본 responseTransformer를 실행하고 응답을 JSON으로 변환하려고 한다는 것입니다.또, 디폴트의 accept 헤더를 송신합니다.다음으로 (테스트되지 않은) 대안을 제시하겠습니다.
$http.get('/retrievePDFFiles', {
headers: { Accept: "application/pdf"},
transformResponse: function(data) {
return new Blob([data], {type: 'application/pdf'});
}}).success(function (data) {
var fileURL = URL.createObjectURL(data);
window.open(fileURL);
});
언급URL : https://stackoverflow.com/questions/25781927/how-to-read-pdf-stream-in-angularjs
반응형
'programing' 카테고리의 다른 글
typescript react-native를 사용하여 fetch api에 헤더를 추가할 수 없습니다. (0) | 2023.02.22 |
---|---|
JSONObject - 값을 얻는 방법 (0) | 2023.02.22 |
WooCommerce에서 cart_item_data를 가져오려면 어떻게 해야 합니까? (0) | 2023.02.22 |
재료 설계 라이트(Right)JS (0) | 2023.02.22 |
Spring Security HTTP Basic for RESTFul 및 FormLogin(Cookies) for web - 주석 (0) | 2023.02.22 |