web-dev-qa-db-ja.com

PDFファイル、Angular 6およびWeb APIをダウンロードします

PDF 6およびWeb APIを使用してAngularをダウンロードしたい。コードの実装は次のとおりです。

mycomponent.ts

download(myObj: any) {
    this.testService.downloadDoc(myObj.id).subscribe(result => {

        var url = window.URL.createObjectURL(result);
        window.open(url);
        console.log("download result ", result);
    });
}

myService.ts

downloadDoc(Id: string): Observable<any> {
    let url = this.apiUrl + "api/myApi/download/" + Id;
    return this.http.get(url, { responseType: "blob" });
}

Web APIサービス

[HttpGet("download/{DocId}")]
    public async Task<HttpResponseMessage> GetDocument(string docId)
    {
        var docDetails = await _hoaDocs.GetDocumentDetails(docId).ConfigureAwait(false);
        var dataBytes = docDetails.Stream;
        var dataStream = new MemoryStream(dataBytes);

        var response = new HttpResponseMessage
        {
            StatusCode = HttpStatusCode.OK,
            Content = new StreamContent(dataStream)
        };

        response.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachment")
        {
            FileName = docDetails.File_Name
        };
        response.Content.Headers.ContentType = new MediaTypeHeaderValue("application/pdf");

        return response;
    }

上記のコードを実行すると、PDFがダウンロードされません。コンソールに記録される結果オブジェクトは次のとおりです。

download result  
Blob(379) {size: 379, type: "application/json"}
size:379
type:"application/json"
__proto__:Blob
angularangular6asp.net-core-webapi
11
Madhu

.Net Coreを使用していると仮定しています。

返されるタイプはHttpResponseMessageです。 .Net Core以降では、IActionResultになります。

だから、あなたの場合、あなたは戻ってきます

return File(<filepath-or-stream>, <content-type>)

または

Startup.csファイルを少し変更する必要があります。

services.AddMvc().AddWebApiConventions();

その後、私はここで100％確信していませんが、ルーティングも変更する必要があります：

routes.MapWebApiRoute("DefaultApi", "api/{controller}/{id?}");
5
r2018
import { Injectable } from "@angular/core";
declare var $;

@Injectable()
export class DownloadFileService {

   save(file, fileName) {
       if (window.navigator.msSaveOrOpenBlob) {
        // IE specific download.
        navigator.msSaveBlob(file, fileName);
    } else {
        const downloadLink = document.createElement("a");
        downloadLink.style.display = "none";
        document.body.appendChild(downloadLink);
        downloadLink.setAttribute("href", window.URL.createObjectURL(file));
        downloadLink.setAttribute("download", fileName);
        downloadLink.click();
        document.body.removeChild(downloadLink);
     }
   }
}
4
anees

一部のブラウザでは、ファイルをダウンロードするために、アンカータグを動的に作成し、クリック可能にする必要があります。ここにコードがあります。

  const link = document.createElement('a');
  link.href = window.URL.createObjectURL(blob);
  link.download = filename;
  link.click();

お役に立てれば。ありがとう。

1
Suresh Kumar Ariya

dataService.ts

  downloadNoteReceipt(notes_purchased_id: number):Observable<Blob>{    
        return this.httpClient.get(this.baseUrl + `receipt/notespurchasedreceipt/` + notes_purchased_id, { responseType: "blob" } );
      }

component.ts

  download(booking_id: number) {
    this.orderDetailsService.downloadNoteReceipt(booking_id).subscribe(res => {
      console.log(res);
      var newBlob = new Blob([res], { type: "application/pdf" });

      if (window.navigator && window.navigator.msSaveOrOpenBlob) {
        window.navigator.msSaveOrOpenBlob(newBlob);
        return;
    }
     // For other browsers: 
            // Create a link pointing to the ObjectURL containing the blob.
            const data = window.URL.createObjectURL(newBlob);

            var link = document.createElement('a');
            link.href = data;
            link.download = "receipt.pdf";
            // this is necessary as link.click() does not work on the latest firefox
            link.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true, view: window }));

            setTimeout(function () {
                // For Firefox it is necessary to delay revoking the ObjectURL
                window.URL.revokeObjectURL(data);
            }, 100);

    }, error => {
      console.log(error);
    })
  }

component.html

 <i class="fa fa-download" style="font-size:20px;color:purple" aria-hidden="true" (click)="download(row.booking_id)"></i>
1
Sachin from Pune