Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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?

like image 593
DenEwout Avatar asked Mar 15 '17 13:03

DenEwout


2 Answers

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

like image 87
DenEwout Avatar answered Nov 17 '22 18:11

DenEwout


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

like image 3
Simon Avatar answered Nov 17 '22 18:11

Simon