2016-08-05 23 views
6

角度2 /タイプスクリプトとWeb APIを使用してファイルをダウンロードしようとしています。私が抱えている問題は、テキストファイルをダウンロードするときにファイルがファイルですが、たとえばPDFファイルをダウンロードしようとすると、ファイルが破損するということです。ダウンロードしたファイルの内容が乱雑になります。次のように角度2ファイルをダウンロード中:破損した結果

私が使用してい活字体は次のとおりです。

downloadFile(fileId: string): Observable<File> { 
    this.applicationsUrl = `${APIConfig.BaseUrl}/documents/download/${fileId}/`; 

    let headers = new Headers({ 'Content-Type': 'application/json', 'MyApp-Application' : 'AppName' }); 
    let options = new RequestOptions({ headers: headers }); 

    return this.http.post(this.applicationsUrl, '', options) 
     .map(this.extractContent) 
     .catch(this.handleError); 
} 

private extractContent(res: any) { 
    let blob: Blob = new Blob([res._body], { type: 'application/pdf'}); 
    window['saveAs'](blob, 'test.pdf'); 
} 

ウィンドウ[「のsaveAs」]のJavaScript FileSaver.js機能にアクセスするための単なる回避策です。

さらに、res:res:anyへのレスポンスを設定すると、TypeScriptでコンパイルエラーが発生していないJavaScriptのprivate _bodyプロパティにアクセスできます。

ご協力いただければ幸いです。角度RC5次のコードのよう

答えて

8

はあなたのために働く必要があります。

downloadFile(fileId: string): Observable<File> { 
this.applicationsUrl = `${APIConfig.BaseUrl}/documents/download/${fileId}/`; 

let headers = new Headers({ 'Content-Type': 'application/json', 'MyApp-Application' : 'AppName', 'Accept': 'application/pdf' }); 
let options = new RequestOptions({ headers: headers, responseType: ResponseContentType.Blob }); 

return this.http.post(this.applicationsUrl, '', options) 
    .map(this.extractContent) 
    .catch(this.handleError); 
} 

private extractContent(res: Response) { 
    let blob: Blob = res.blob(); 
    window['saveAs'](blob, 'test.pdf'); 
} 

私は同様の問題を抱えていたとBlobに、application/pdfにresponseTypeを受け入れ、ヘッダーを設定し、レスポンスに対応するメソッドを介してブロブにアクセス私のためにこれを解決:) (私もFileSaverを使用しています)

+0

どのようにFileSaverを使用していますか? Typescriptでそれを使用する例がありますか? –

関連する問題