如何從javascript中的二進制流打開並讀取PDF

我在使用JavaScript讀取二進制數據流時遇到了一些困難。如何從javascript中的二進制流打開並讀取PDF

目前，一個窗口彈出並打開並顯示無法加載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�=���

來源

2016-07-13 Tfish

我想你不能只是「打開並閱讀」PDF這樣的文件。您應該考慮使用PDF呈現&解析庫，例如PDF.js。

來源

2016-07-13 08:14:11 sonlexqt

您可以讀取PDF數據流並使用該庫顯示/下載它嗎？ – Tfish

當然！我用它在我的公司和個人項目。這裏有一個官方的演示：https：//mozilla.github.io/pdf.js/web/viewer.html。另外，這裏有示例/演練：https://mozilla.github.io/pdf.js/examples/ – sonlexqt

我實際上修復了它，以便它可以按我的需要工作！

我在blob之前添加了responseType: 'arraybuffer',，然後在成功之內將它稱爲application/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); 
      }); 

    }

來源

2016-07-13 13:41:34 Tfish

如何從javascript中的二進制流打開並讀取PDF

回答

相關問題