6

I am loading a PDF as follows (I am using Angular 2, but I am not sure that this matters..):

//Inside a service class
downloadPdf = (id): Observable<Blob> => {
    let headers = new Headers();
    headers.append("Accept", "application/pdf");
    return this.AuthHttp.get(this.pdfURL + id, {
        headers: headers,
        responseType: ResponseContentType.Blob
    }).map(res => new Blob([res.blob()], {type: "application/pdf"}));
}

//Inside a click handler
this.pdfService.downloadPdf(this.id).subscribe((data: Blob) => {
        let fileURL = window.URL.createObjectURL(data);
        window.open(fileURL);
    });

This code runs nicely in Firefox. In Chrome, a new tab briefly flashes open and closes. When I debug and I manually put surf to the object URL, Chrome can open it just fine.

What am I doing wrong here?

Wai Ha Lee
  • 8,598
  • 83
  • 57
  • 92
DenEwout
  • 885
  • 2
  • 10
  • 17
  • 1
    Any chance you have AdBlock Plus or any other type of ad block extension on? I was having the same issue with almost identical code, but after disabling AdBlock Plus the issue went away. – David Ouwinga Mar 16 '17 at 20:19

2 Answers2

18

The opening of a new tab got blocked by an adblocker.

DenEwout
  • 885
  • 2
  • 10
  • 17
3

It can not work, new popup will be blocked by browser, because of it was created from callback which is not a trusted event, to make it work it must be called directly from click handler, or you have to disable bloking popups in your browser.

Chrome will only allow this to work as wanted if the ajax call returns in less than a second. More there

Simon
  • 997
  • 1
  • 15
  • 29
  • I would prefer Adblock approach instead of making separate click handler – Harshal Patil Mar 22 '18 at 12:22
  • i am interested in this situation. I cannot guarantee that my clients won't have addblock. I have to create a situation in which the pdf blob will open either way. – gxg Jun 27 '19 at 19:13