web-dev-qa-db-ja.com

Angular 6 ResponseContentType

APIレストからいくつかのxlsをダウンロードしようとしていますが、無駄にResponseContentTypeを使用する必要がありますか？

[ts] O módulo '"/home/dev/Documentos/Java-TUDO/SIMPLUS/simplus-cliente/node_modules/@angular/common/http"' não tem nenhum membro exportado 'ResponseContentType'.


import ResponseContentType
import { Injectable } from '@angular/core';
import { HttpClient, ResponseContentType } from '@angular/common/http';
import { Product } from '../model/product.model';

@Injectable()
export class ProductService {
angularrestapispring-bootxls
5
Junior Osho

ファイルをダウンロードする正しい方法は、responseType: 'blob'。

認証ヘッダーを渡す例もここにあります。これは必須ではありませんが、これを構築して追加のヘッダーを送信する方法の詳細については、HttpClientのgetメソッドを参照してください。

//service
public downloadExcelFile() {
const url = 'http://exmapleAPI/download';
const encodedAuth = window.localStorage.getItem('encodedAuth');

return this.http.get(url, { headers: new HttpHeaders({
  'Authorization': 'Basic ' + encodedAuth,
  'Content-Type': 'application/octet-stream',
  }), responseType: 'blob'}).pipe (
  tap (
    // Log the result or error
    data => console.log('You received data'),
    error => console.log(error)
  )
 );
}

HttpClient get（）。

 /**
 * Construct a GET request which interprets the body as an `ArrayBuffer` and returns it.
 *
 * @return an `Observable` of the body as an `ArrayBuffer`.
 */
get(url: string, options: {
    headers?: HttpHeaders | {
        [header: string]: string | string[];
    };
    observe?: 'body';
    params?: HttpParams | {
        [param: string]: string | string[];
    };
    reportProgress?: boolean;
    responseType: 'arraybuffer';
    withCredentials?: boolean;
}): Observable<ArrayBuffer>;

このようにコンポーネントでこれを使用できます。

    datePipe = new DatePipe('en-Aus');

    onExport() {
    this.service.downloadExcelFile().subscribe((res) => {
      const now = Date.now();
      const myFormattedDate = this.datePipe.transform(now, 'yyMMdd_HH:mm:ss');
      saveAs(res, `${this.docTitle}-${myFormattedDate}.xlsx`);
    }, error => {
      console.log(error);
    });
  }

@ angular/commonのDatePipeを使用して、ファイル名を一意にしました。

また、ファイルセーバーを使用してファイルを保存しました。

ファイルセーバーをインポートするには、以下のパッケージを追加してファイルセーバーをインストールします。

npm install -S file-saver
npm install -D @types/file-saver

そして、コンポーネントにimportステートメントを追加します。

import { saveAs } from 'file-saver';
10
Mukus