Angular JS空pdf在新窗口中 [英] Angular JS empty pdf in new window

问题描述

问题是当我想用angular js创建PDF文件为空

The problem is when i want to create PDF with angular js the file is empty

这是场景:

我有rest api，当我使get request响应有效负载是这样的时候:

I have rest api, when i make get request response payload is like this :

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

响应头是

:

并且pdf没问题，里面有数据.

and the pdf is ok, with data in it.

问题是当我使http从angular获取时

The problem is when i make http get from angular :

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

pdf为空.为什么会发生这种情况以及如何解决?两个请求中的响应有效载荷是相同的.

the pdf is empty. why is this happening and how to fix it? The response payload in both requests is the same.

第二个呼叫中的响应标头是:

response headers in second call are:

控制台日志正在打印此

%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

推荐答案

相同的完整博客文章:

Full blogpost for the same : Download File in Angular Js2 Application

以下在为我工作，您可以尝试一下，您错过的一件事是RequestOptions({responseType: ResponseContentType.Blob})，而您错过的另一件事是:<Blob>response.blob()

Below is working for me , you can try out that , one thing you missed out that is RequestOptions({responseType: ResponseContentType.Blob}), another thing you missed is : <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())  ;
  }

这篇关于Angular JS空pdf在新窗口中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！