How display pdf in new tab using blob

Question

I have this method in TypeScript/Angular, that generate my file

 imprimir() {

            this.service.emitirAdvertencia({ parametros: [{ name: 'CODIGO', value: 880 }] })
            .subscribe((response) => {
                console.log(response);             
                var fileURL = window.URL.createObjectURL(response);                        

                //this not display my pdf document in a new tab.
                window.open(fileURL, '_blank');

                //this display my document pdf, but in current tab
                window.location.href = fileURL; 
            }, error => {
                console.log(error);
            });
        }

This is my service

emitirAdvertencia(parametros: Object): any {
        parametros['dbenv'] = ApplicationContext.getInstance().getDbenv();
        parametros['usuario'] = ApplicationContext.getInstance().getUser().codigoUsuario;
        parametros['nome_relatorio'] = 'RelAdvertenciaDB';
        var httpOptions = {

            headers: new HttpHeaders({
                'Authorization': this.localStorage.get('token'),
            }),
            responseType: 'blob' as 'blob',
        };
        return this.http.get(ApplicationContext.URL + '/adiantamento/gerar-relatorio/', httpOptions)
            .map((res) => {
                var report = new Blob([res], { type: 'application/pdf' });
                return report;
            });

Like a commented in code, when i try open in a new tab, not works, only works if i open in current tab

How open this blob pdf file in new tab ?

This is defined by the users browser, see this: [https://stackoverflow.com/questions/4907843/open-a-url-in-a-new-tab-and-not-a-new-window-using-javascript](https://stackoverflow.com/questions/4907843/open-a-url-in-a-new-tab-and-not-a-new-window-using-javascript) — seven, Mar 16 '18 at 13:31
The problem is Adblock, has blocked the new tab, after disabling Adblock, it works. Thanks, your comment led me to a solution — Jeterson Miranda Gomes, Mar 16 '18 at 19:35

score 10 · Answer 1 · edited Mar 30 '21 at 19:44

10

I could make it works like this:

var fileURL = window.URL.createObjectURL(data);
let tab = window.open();
tab.location.href = fileURL;

edited Mar 30 '21 at 19:44

Dmitry S.

1,544
2
13
22

answered Mar 29 '21 at 18:36

Waseem Khalid

101
1
3

8

even simpler : `window.open(fileURL);` – tigrou Jan 20 '22 at 19:05
While this solution works, `window.open(fileURL);` gest blocked by the popup blocker. Is there a way to open a new tab without being blocked? – Bozzy Jul 05 '23 at 09:22

score 8 · Answer 2 · edited Jan 27 '22 at 14:44

8

To open file in new Tab, you need to create anchor Element in Typescript and add your file url in href attribute of this element.

In my example service response is as data._body for file blob, you can arrange it as your output response from your service.

var newTab = true;
var inputData = { parametros: [{ name: 'CODIGO', value: 880 }] };

this.service.emitirAdvertencia(inputData).subscribe(
    (data: any) => {
       var contentType = data.headers._headers.get('content-type')[0];
       var blob = new Blob([data._body], { type: contentType });
       var url = window.URL.createObjectURL(blob, { oneTimeOnly: true });
    
       //window.open(url, '_blank', '');
       var anchor = document.createElement('a');
       anchor.href = url;
       if (newTab) {
           anchor.target = '_blank';
       }
       anchor.click();
   },
   error => {
       //TODO
   },
   () => { 
      //TODO 
   }
);

edited Jan 27 '22 at 14:44

James

4,644
5
37
48

answered Mar 16 '18 at 14:21

Amol Bhor

2,322
1
12
14

1

actually do not need to create an anchor element, it just works by creating a new tab through window.open, what was preventing it from opening a tab in chrome was AdBlock – Jeterson Miranda Gomes Mar 16 '18 at 19:29
4

I could make it works like this `var fileURL = window.URL.createObjectURL(data); let tab = window.open(); tab.location.href = fileURL;` – Jeterson Miranda Gomes Mar 16 '18 at 19:31
2

One doubth, What is property `{ oneTimeOnly: true }` ? – Jeterson Miranda Gomes Mar 16 '18 at 19:33
Solved my problem using React JS + Chrome on android phone and desktop too. – Rafael Rossi Apr 07 '21 at 23:02

How display pdf in new tab using blob

2 Answers2

Linked