Angular JS leer pdf in einem neuen Fenster

Question

Das Problem ist, wenn ich PDF erstellen möchten mit eckigem js die Datei ist leer

Dies ist das Szenario:

ich Rest api haben, wenn ich Anfrage-Antwort erhalten zu lassen Nutzlast ist wie folgt:

JVBERi0xLjQKJeLjz9MKMyAwIG9iago8PC9GaWx0ZXIvRmxhdGVEZWNvZGUvTGVuZ3RoIDE4NT4+c3RyZWFtCnicpY4xD4JADIX3+xVvxEV7PeDAUYXBSZNzMg4EkGgCRIiD/144B41RNCF9aZO2r18vYmGE8hGQD5OJyIitYKz7rgR10efAZZhSzGIJSTBH4UzMud99rhDS8tXkMbTmqf9mJDtuCuEkbdYpexSr/iah+HB3f+hqZv/6TmQVQqtBZFVXt7K+trs2b0bSQhc+0wAsbk5Y5Smoc9DcCsvIgEnqkWylf7A3SQMeCXG1Bw4HIPIvwB0h835eCmVuZHN0cmVhbQplbmRvYmoKMSAwIG9iago8PC9UYWJzL1MvR3JvdXA8PC9TL1RyYW5zcGFyZW5jeS9UeXBlL0dyb3VwL0NTL0RldmljZVJHQj4+L0NvbnRlbnRzIDMgMCBSL1R5cGUvUGFnZS9SZXNvdXJjZXM8PC9Db2xvclNwYWNlPDwvQ1MvRGV2aWNlUkdCPj4vUHJvY1NldCBbL1BERiAvVGV4dCAvSW1hZ2VCIC9JbWFnZUMgL0ltYWdlSV0vRm9udDw8L0YxIDIgMCBSPj4+Pi9QYXJlbnQgNCAwIFIvTWVkaWFCb3hbMCAwIDU5NSA4NDJdPj4KZW5kb2JqCjUgMCBvYmoKWzEgMCBSL1hZWiAwIDg1MiAwXQplbmRvYmoKMiAwIG9iago8PC9TdWJ0eXBlL1R5cGUxL1R5cGUvRm9udC9CYXNlRm9udC9IZWx2ZXRpY2EvRW5jb2RpbmcvV2luQW5zaUVuY29kaW5nPj4KZW5kb2JqCjQgMCBvYmoKPDwvS2lkc1sxIDAgUl0vVHlwZS9QYWdlcy9Db3VudCAxL0lUWFQoMi4xLjcpPj4KZW5kb2JqCjYgMCBvYmoKPDwvTmFtZXNbKEpSX1BBR0VfQU5DSE9SXzBfMSkgNSAwIFJdPj4KZW5kb2JqCjcgMCBvYmoKPDwvRGVzdHMgNiAwIFI+PgplbmRvYmoKOCAwIG9iago8PC9OYW1lcyA3IDAgUi9UeXBlL0NhdGFsb2cvUGFnZXMgNCAwIFIvVmlld2VyUHJlZmVyZW5jZXM8PC9QcmludFNjYWxpbmcvQXBwRGVmYXVsdD4+Pj4KZW5kb2JqCjkgMCBvYmoKPDwvTW9kRGF0ZShEOjIwMTcxMjA1MTgwNDM5KzAxJzAwJykvQ3JlYXRvcihKYXNwZXJSZXBvcnRzIExpYnJhcnkgdmVyc2lvbiA2LjEuMCkvQ3JlYXRpb25EYXRlKEQ6MjAxNzEyMDUxODA0MzkrMDEnMDAnKS9Qcm9kdWNlcihpVGV4dCAyLjEuNyBieSAxVDNYVCk+PgplbmRvYmoKeHJlZgowIDEwCjAwMDAwMDAwMDAgNjU1MzUgZiAKMDAwMDAwMDI2NyAwMDAwMCBuIAowMDAwMDAwNTQzIDAwMDAwIG4gCjAwMDAwMDAwMTUgMDAwMDAgbiAKMDAwMDAwMDYzMSAwMDAwMCBuIAowMDAwMDAwNTA4IDAwMDAwIG4gCjAwMDAwMDA2OTQgMDAwMDAgbiAKMDAwMDAwMDc0OCAwMDAwMCBuIAowMDAwMDAwNzgwIDAwMDAwIG4gCjAwMDAwMDA4ODMgMDAwMDAgbiAKdHJhaWxlcgo8PC9JbmZvIDkgMCBSL0lEIFs8MzlhYzY4ZDI4YjM4ZGYwNDcwNDM2YTM4ZjA2ZjI2MjY+PGMxNDNkNzJiMDE5M2ZmYzM5ZDMyM2UxNzlhN2QyNDdjPl0vUm9vdCA4IDAgUi9TaXplIDEwPj4Kc3RhcnR4cmVmCjEwNTAKJSVFT0YK 

Die Antwort-Header sind

:

012.351.

und das PDF ist in Ordnung, mit Daten drin.

Das Problem ist, wenn ich http get aus Winkel machen:

$scope.confirmPayment = function(){ 
    $http.get(apiUrl).then(function(response) { 
     console.log(response.data); 
     var data = new Blob([response.data], { type: "application/pdf" }); 
     var fileURL = URL.createObjectURL(data); 
     window.open(fileURL); 
    }); 
}; 

der pdf ist leer. Warum passiert das und wie kann man es reparieren? Die Antwort-Payload in beiden Anfragen ist identisch.

Response-Header in dem zweiten Aufruf sind:

Konsolenprotokoll dieses

%PDF-1.4 
%���� 
3 0 obj 
<</Filter/FlateDecode/Length 178>>stream 
x���1��@�����7⢽�w����mƁ��L������1�&�/m���녖�|�9k؜bK;�l���w��y �5���ŰG�&���>W�Y�j 
���T��ٍے���w��ũ��(?���������ŏ`�Ads;7U1����������.2p����V���2#پ��ަ-d$$0!$�����w6~{� 
endstream 
endobj 
1 0 obj 
<</Tabs/S/Group<</S/Transparency/Type/Group/CS/DeviceRGB>>/Contents 3 0 R/Type/Page/Resources<</ColorSpace<</CS/DeviceRGB>>/ProcSet [/PDF /Text /ImageB /ImageC /ImageI]/Font<</F1 2 0 R>>>>/Parent 4 0 R/MediaBox[0 0 595 842]>> 
endobj 
5 0 obj 
[1 0 R/XYZ 0 852 0] 
endobj 
2 0 obj 
<</Subtype/Type1/Type/Font/BaseFont/Helvetica/Encoding/WinAnsiEncoding>> 
endobj 
4 0 obj 
<</Kids[1 0 R]/Type/Pages/Count 1/ITXT(2.1.7)>> 
endobj 
6 0 obj 
<</Names[(JR_PAGE_ANCHOR_0_1) 5 0 R]>> 
endobj 
7 0 obj 
<</Dests 6 0 R>> 
endobj 
8 0 obj 
<</Names 7 0 R/Type/Catalog/Pages 4 0 R/ViewerPreferences<</PrintScaling/AppDefault>>>> 
endobj 
9 0 obj 
<</ModDate(D:20171205182420+01'00')/Creator(JasperReports Library version 6.1.0)/CreationDate(D:20171205182420+01'00')/Producer(iText 2.1.7 by 1T3XT)>> 
endobj 
xref 
0 10 
0000000000 65535 f 
0000000260 00000 n 
0000000536 00000 n 
0000000015 00000 n 
0000000624 00000 n 
0000000501 00000 n 
0000000687 00000 n 
0000000741 00000 n 
0000000773 00000 n 
0000000876 00000 n 
trailer 
<</Info 9 0 R/ID [<1e77577afe299f8055a81e3d5141da79><eaf48da4dde2751fa6380537fbce1a72>]/Root 8 0 R/Size 10>> 
startxref 
1043 
%%EOF 
controller.home.js:7:7 

Answer 1

Vollblogpost für den gleichen druckt: Download File in Angular Js2 Application

unten für mich arbeiten, können Sie kann das ausprobieren, eine Sache, die Sie verpasst haben, ist RequestOptions({responseType: ResponseContentType.Blob}), eine andere Sache, die Sie verpasst haben, ist: <Blob>response.blob()

ngOnInit(): void { 
    this.getFile("http://localhost:1800/api/demo/GetTestFile") 
    .subscribe(fileData => 
     { 
     let b:any = new Blob([fileData], { type: 'application/zip' }); 
     var url= window.URL.createObjectURL(b); 
     window.open(url); 
     } 
    ); 
    } 

    public getFile(path: string):Observable<any>{ 
    let options = new RequestOptions({responseType: ResponseContentType.Blob}); 
    return this.http.get(path, options) 
     .map((response: Response) => <Blob>response.blob()) ; 
    }