programing

pdf 스트림을 angularjs로 읽는 방법

goodsources 2023. 2. 22. 21:50
반응형

pdf 스트림을 angularjs로 읽는 방법

서버로부터 다음의 PDF 스트림을 받았습니다.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

반응형