如何从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

回答

相关问题