web-dev-qa-db-ja.com

xlsxファイルのダウンロードangular 2 with blob

REST APIを使用してangular 2でクライアントからxlsxファイルをダウンロードしたい。

GETリクエストからの応答としてバイト配列を取得し、subscribeを使用してダウンロード関数に送信しています。

let options = new RequestOptions({ search: params });
this.http.get(this.restUrl, options)
          .subscribe(this.download);

blobを使用したダウンロード機能：

download(res: Response) {
let data = new Blob([res.arrayBuffer()], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;' });
FileSaver.saveAs(data, this.fileName);};

私の問題は、私のファイルが常に破損していることです。私はこれの多くのバージョンを試しましたが、何も動作しません。

**このソリューションでも試してみましたが、動作しません（xlsxファイルはまだ破損しています）- Angular 2のファイルのダウンロード：破損した結果 、違いは私のデータが配列バッファであり、文字列やjsonではなく、PDFとxlsx。

10倍！

angulartypescriptblob
10
reut

何も動作しない後。サーバーを変更して、次を追加して同じバイト配列を返すようにしました。

    response.setContentType("application/vnd.openxmlformats-officedocument.spreadsheetml.sheet");
    response.setHeader("Content-Disposition", "attachment; filename=deployment-definitions.xlsx");

私のクライアントでダウンロード機能を削除し、GETパートの代わりに次のことを行いました。

window.open(this.restUrl, "_blank");

これは、破損していないxlsxファイルを保存できる唯一の方法です。

あなたがブロブでそれを行う方法についての答えがある場合は教えてください:)

5
reut

私はあなたと同じ問題を抱えていました-responseType: ResponseContentType.Blob取得オプションに。以下のコードを確認してください。

public getReport(filters: ReportOptions) {
    return this.http.get(this.url, {
            headers: this.headers,
            params: filters,
            responseType: ResponseContentType.Blob
        })
        .toPromise()
        .then(response => this.saveAsBlob(response))
        .catch(error => this.handleError(error));
}

SaveAsBlob（）は、FileSaver.SaveAs（）の単なるラッパーです。

private saveAsBlob(data: any) {
    const blob = new Blob([data._body],
        { type: 'application/vnd.ms-Excel' });
    const file = new File([blob], 'report.xlsx',
        { type: 'application/vnd.ms-Excel' });

    FileSaver.saveAs(file);
}
11
Vergatti

以下のコードを使用できます：

var file = new Blob([data], { 
    type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' 
});
saveAs(file,"nameFile"+".xlsx");
deferred.resolve(data);
1
El mehdi AZROUR

私にとって問題は、私のresponseTypeが「テキスト」だったことです。代わりに、「blob」を使用する必要がありました。 Angular 7.2.15。

0
Andris

IEおよびchrome/safariブラウザをサポートするソリューションです。ここで、 'response'オブジェクトはサービスから受信した応答です。これはアーカイブ用に動作しています。受信した応答に従ってタイプを変更できます。サービスから。

    let blob = new Blob([response], {type: 'application/Zip'});
    let fileUrl = window.URL.createObjectURL(blob);
    if (window.navigator.msSaveOrOpenBlob) {
        window.navigator.msSaveOrOpenBlob(blob, fileUrl.split(':')[1] + '.Zip');
    } else {
        this.reportDownloadName = fileUrl;
        window.open(fileUrl);
    }
0
Dilip Nannaware

Googleで次のソリューションが機能しましたChromeバージョン58.0.3029.110（64ビット）。

Blobを使用してpdfをダウンロードする方法を説明する記事です。 https://brmorris.blogspot.ie/2017/02/download-pdf-in-angular-2.html

Xlsxファイルの場合も同じ原理です。記事の手順に従って、2つのことを変更してください。

  • ヘッダー、{'Accept'： 'application/pdf'}の代わりに、{'Accept'： 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'}を使用します。
  • Blob、Blobの作成に同じタイプ、new Blob（[fileBlob]、{type： 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'}）を使用します。

この記事ではファイルセーバーを使用していますが、使用しませんでした。記事に、ファイルセーバーの代わりに使用したものの基本的な説明をコメントとして残しました。

0
Arthur Almeida