angularjs kann keine Datei von api zeigen

Question

Ich habe eine App, wo Frontend in Angularjs und Backend mit Symfony entwickelt wird.

Ich brauche einen Weg zu haben, wie: http://example.com/api/invoices/file?file=foo

So habe ich dies in meinem FileController:

/** 
    * Matches /invoices/file/{filename} exactly 
    * 
    * @Route("/invoices/file/{filename}", name="get_invoice_file") 
    */ 
    public function getInvoiceFileAction(string $filename, Request $request) 
    { 
     $path = $this->get('kernel')->getRootDir() . '/../web/uploads/invoices/' . $filename; 

     if (!file_exists($path)) { 
      return new Response('file not found', 404); 
     } 

     $file = file_get_contents($path); 
     $headers = [ 
      'Content-Type' => 'application/pdf', 
      'Conteng-Length' => filesize($path) 
     ]; 

     return new Response($file, 200, $headers); 
    } 

Inside my AngularJS app ich dies haben die Antwort in meinem Frontend-Controller zu erhalten:

vm.getInvoices = function() { 
      vm.loading = true; 
      apiResolver.resolve('invoices.documents.file@get', { "file": vm.searchFile }).then(function(response) { 
       vm.loading = false; 

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

      }); 
     }; 

In meinem html ich habe diese:

<embed ng-src="{{vm.file}}" style="width:200px;height:200px;"></embed> 

Wenn ich die Seite rendere, sehe ich eine 200response, so dass die Datei existiert, aber in den HTML habe ich einen leeren Platz anstelle von pdf-Datei. Innerhalb embed-Tag gibt dies:

<embed style="width:200px;height:200px;" ng-src="blob:http://localhost:3000/d32d87d1-6582-42e3-85ae-dc174ca5a473" src="blob:http://localhost:3000/d32d87d1-6582-42e3-85ae-dc174ca5a473"> 

Wenn ich URL in einem Browser zu kopieren gibt mir, dass die Datei nicht laden kann.

Backend und Frontend sind in verschiedenen Ordnern und das PDF kann NICHT durch einen öffentlichen Link angezeigt werden. Diese Seiten sind mit dem JWT System geschützt.

Wie kann ich innerhalb meiner Seite das pdf zeigen? Was mache ich falsch?

Answer 1

Stellen Sie sicher, dass JWT Berechtigungstoken in der Anforderung übergeben wird. Wenn nicht, übergeben Sie es im Blob-Objekt.

Wenn Token Versuch embed zu object geben wird ersetzt, wie unten erwähnt:

<object data="{{vm.file}}" style="width:200px;height:200px;" type="application/pdf"></object>