JavaScriptをバイナリストリームから開く方法と読む方法

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); 
    } 

ここに私のフロントエンドJavaScriptのコントローラがあります：

$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

私は実際にそれが必要に応じて動作するように修正しました！

ブロブの直前に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); 
      }); 

    }