risparmio Blob come XLSX in Angular2

Question

ho alcuni problemi con il salvataggio xlsx nel mio Angular2 app:

this._http.get('/api/file).subscribe(success=>{ 
       var blob = new Blob([success.json()], { 
        type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' 
       }); 
       var downloadUrl= window.URL.createObjectURL(blob); 
       window.open(downloadUrl); 

      }, error=>{ 

      }); 

La risposta che ricevo da backend è il seguente modulo:

PK�q�H_rels/.rels���j�0��} 
�{㴃1F�^Ơ�2��l%1I,c�[��3�l 
l�����H��4��R�l��·����q}*�2�������;�*�� 
t"�^�l;1W)�N�iD)ejuD�cKz[׷:}g����@:�.... etc 

Tutte le idee in cui Sto facendo un errore?

Answer 1

Il problema è che il contenuto della risposta binaria non è supportato immediatamente. È necessario "manualmente" impostare il tipo di risposta per l'oggetto XHR sottostante

Per risolvere il problema, è necessario estendere la classe BrowserXhr di Angular2 per impostare la responseType come descritto di seguito per blob sull'oggetto XHR sottostante:

import {Injectable} from 'angular2/core'; 
import {BrowserXhr} from 'angular2/http'; 

@Injectable() 
export class CustomBrowserXhr extends BrowserXhr { 
    constructor() {} 
    build(): any { 
    let xhr = super.build(); 
    xhr.responseType = "blob"; 
    return <any>(xhr); 
    } 
} 

Fare attenzione quando si registra questo corso nei provider poiché è globale. È necessario impostarlo solo all'interno del componente che esegue la richiesta. Nel caso si, si ottiene una rappresentazione di stringa di dati di risposta ...

@Component({ 
    (...) 
    providers: [ 
    provide(BrowserXhr, { useClass: CustomBrowserXhr }) 
    ] 
}) 
export class ... 

allora avete bisogno di ottenere i dati dal _body proprietà dell'oggetto risposta. Si dovrebbe usare normalmente dal momento che è una interna, ma non c'è altro modo in questo momento:

this._http.get('/api/file).subscribe(success => { 
    var blob = new Blob([success._body], { 
       type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' 
    }); 
    var downloadUrl= window.URL.createObjectURL(blob); 
    window.open(downloadUrl); 
}, error=>{ 
    (...) 
}); 

Vedere questa domanda per maggiori dettagli:

• Angular 2 download PDF from API and Display it in View