Angular2 Hiển thị PDF

Question

Tôi có dự án angular2 với API Web ASP.Net. Tôi có mã để lấy một đường dẫn tập tin từ cơ sở dữ liệu của tôi mà đi đến một tài liệu trên máy chủ của tôi. Sau đó tôi muốn hiển thị tài liệu này trong trình duyệt trong một tab mới. Có ai có bất cứ đề nghị làm thế nào để làm điều này?

Tôi rất vui khi truy xuất tệp trong Angular2 (Typescript) hoặc trong API của tôi và truyền tệp xuống.

Đây là nỗ lực của tôi về lấy nó trong API của tôi, nhưng tôi không thể làm việc ra làm thế nào để nhận được nó trong Angular2 và hiển thị nó đúng cách:

public HttpResponseMessage GetSOP(string partnum, string description) 
    { 
     var sopPath = _uow.EpicorService.GetSOP(partnum, description).Path; 
     HttpResponseMessage result = new HttpResponseMessage(HttpStatusCode.OK); 
     var stream = new FileStream(sopPath, FileMode.Open); 
     result.Content = new StreamContent(stream); 
     result.Content.Headers.ContentType = new System.Net.Http.Headers.MediaTypeHeaderValue("application/octet-stream"); 
     return result; 
    } 

Bất kỳ trợ giúp sẽ được đánh giá rất nhiều.

Rất cám ơn!

Answer 1

Trước hết, bạn cần phải thiết lập các tùy chọn cho yêu cầu http của bạn - thiết responseType-ResponseContentType.Blob, sử dụng blob() để đọc phản ứng như blob và đặt loại của nó để application/pdf:

downloadPDF(): any { 
    return this._http.get(url, { responseType: ResponseContentType.Blob }).map(
    (res) => { 
      return new Blob([res.blob()], { type: 'application/pdf' }) 
     } 
} 

Sau đó, để có được các tập tin, bạn cần phải subscribe với nó và bạn có thể tạo mới ObjectURL và sử dụng window.open() để mở PDF trong tab mới:

this.myService.downloadPDF().subscribe(
     (res) => { 
     var fileURL = URL.createObjectURL(res); 
     window.open(fileURL); 
     } 
    ); 

Answer 2

góc câu trả lời v.5.2.1:

downloadPDF(): any { 
    return this._httpClient.get(url, { responseType: 'blob'}) 
      .map(res => { 
      return new Blob([res], { type: 'application/pdf', }); 
     }); 
    } 

Và sau đó trong *.component.ts

downloadPDF() { 
    let tab = window.open(); 
    this._getPdfService 
     .downloadPDF() 
     .subscribe(data => { 
     const fileUrl = URL.createObjectURL(data); 
     tab.location.href = fileUrl; 
     }); 
    } 

quan trọng của nó để khởi động và mở một tab mới trước gọi dịch vụ. Sau đó, đặt url của tab này thành tệp.