Opening a PDF Blob in a new Chrome tab (Angular 2)

Question

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?

Solution 1

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

Solution 2

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

Comments

[Harshal Patil]

I would prefer Adblock approach instead of making separate click handler

[gxg]

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.