保存的Blob在Angular2

Question

XLSX我有我的Angular2應用節能xlsx一些問題：

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=>{ 

      }); 

我從後臺收到的響應是以下形式：

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 

任何想法哪裏我做錯了？

Answer 1

問題是二進制響應內容不支持開箱即用。你需要「手動」設置底層XHR對象

所述響應類型作爲一種解決方法，則需要擴展BrowserXhr類Angular2的如下所述來設置responseType到blob底層XHR對象上：

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); 
    } 
} 

在提供者中註冊此類時要小心，因爲它是全局的。您應該只在執行請求的組件內設置它。在你的情況下，你會得到響應數據的字符串表示...

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

然後，你需要從響應對象的_body屬性來獲取數據。

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=>{ 
    (...) 
}); 

詳情請參閱此問題：

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