자바 스크립트에서 이진 스트림에서 PDF를 열고 읽는 방법

Question

JavaScript에서 이진 데이터 스트림을 읽는 데 어려움이 있습니다.

현재 창이 열리고 PDF 문서를로드하지 못했습니다.라고 표시됩니다. 아래에 제 응답과 코드를 게시하겠습니다. 도움을 주시면 감사하겠습니다. 여기

내 백엔드 PHP의 :

function getPDF() { 
     $file = __DIR__.'\..\pdf\FAS_HeadedPaper.pdf'; 
     header("Content-Length: " . filesize ($file)); 
     header("Content-type: application/octet-stream"); 
     header("Content-disposition: attachment; filename=".basename($file)); 
     header('Expires: 0'); 
     header('Cache-Control: must-revalidate, post-check=0, pre-check=0'); 
     ob_clean(); 
     flush(); 

     readfile($file); 
    } 

가 여기 내 프론트 엔드의 자바 스크립트 컨트롤러 : 이것은 내 브라우저에서 내 콘솔에서 얻을 응답의 스 니펫이

$scope.sendRef = function(ref){ 

     $http({ 
      method: 'GET', 
      url: $scope.endpoint + 'attachments/PDF', 
      async: true, 
      headers: { 
       'Authorization': 'MyToken' 
      }, 
      params: { 
       ref: ref 
      }, 
      dataType:'blob' 
     }) 
      .success(function (data) { 
       console.log(data); 


       var file = new Blob([(data['response'])], {type: 'application/pdf'}); 
       //var file = data['response']; 
       var fileURL = URL.createObjectURL(file); 
       window.open(fileURL); 
       $scope.content = $sce.trustAsResourceUrl(fileURL); 

      }) 
      .error(function (data, status) { 
       console.log('Error: ' + status); 
       console.log(data); 
      }); 

    } 

입니다 :

%PDF-1.5 
%���� 
1 0 obj 
<</Type/Catalog/Pages 2 0 R/Lang(en-GB) /StructTreeRoot 14 0 R/MarkInfo<</Marked true>>>> 
endobj 
2 0 obj 
<</Type/Pages/Count 1/Kids[ 3 0 R] >> 
endobj 
3 0 obj 
<</Type/Page/Parent 2 0 R/Resources<</Font<</F1 5 0 R/F2 7 0 R/F3 9 0 R>>/XObject<</Image11 11 0 R>>/ProcSet[/PDF/Text/ImageB/ImageC/ImageI] >>/MediaBox[ 0 0 595.32 841.92] /Contents 4 0 R/Group<</Type/Group/S/Transparency/CS/DeviceRGB>>/Tabs/S/StructParents 0>> 
endobj 
4 0 obj 
<</Filter/FlateDecode/Length 917>> 
stream 
x��V[O�X~���p�V>��eUU[B 
�J�B���J�-�S�H���� -��Y�������'۴�E1k����۶-f7��]��z�%�~ߔ�E�\UE���7o��ɘO����dR�0l�$�'�v, 
V��z8 �PL�����e�r����pp�E6.�6�0L�`�*<�}�5 Q��)ӗ��.k�Hgu�m���dc|h����&���x�ߞ��{GIY�L��d 
��e��LMd�ڛb�i��~e%��X���\�l:C~)P%=������\g7+14)^��} ����~�+.m��2"-�w�Q��? KZKP��Su�=��� 

Answer 1

난 그냥 "열고"PDF 파일을 읽을 수 없다고 생각합니다. PDF 렌더링 & 구문 분석 라이브러리 (예 : PDF.js) 사용을 고려해야합니다.

Answer 2

필자가 필요로 할 때 실제로 작동하도록 수정했습니다!

BLOB 바로 앞에 responseType: 'arraybuffer',을 추가 한 다음 응용 프로그램/pdf로 성공 내에서 호출하여 정상적으로 작동했습니다.

$scope.sendRef = function(ref){ 

     $http({ 
      method: 'GET', 
      url: $scope.endpoint + 'attachments/PDF', 
      async: true, 
      headers: { 
       'Authorization': 'MyToken' 
      }, 
      params: { 
       ref: ref 
      }, 
      responseType: 'arraybuffer', 
      dataType:'blob' 
     }) 
      .success(function (data) { 
       console.log(data); 


       var file = new Blob([(data['response'])], {type: 'application/pdf'}); 
       //var file = data['response']; 
       var fileURL = URL.createObjectURL(file); 
       window.open(fileURL); 
       $scope.content = $sce.trustAsResourceUrl(fileURL); 

      }) 
      .error(function (data, status) { 
       console.log('Error: ' + status); 
       console.log(data); 
      }); 

    }