Angular 5 - 显示来自字节 [] 的嵌入式 PDF答案

【问题标题】：Angular 5 - Display Embedded PDF from byte[]Angular 5 - 显示来自字节 [] 的嵌入式 PDF
【发布时间】：2018-03-15 22:48:21
【问题描述】：

我对 Angular 5.0 比较陌生，并且已经阅读了文档，但我似乎无法取得任何进展。我有一个带有 Angular 5 UI 的 .Net Core 2.0 项目，并且正在将 PDF 文件的字节 [] 从 API 控制器传递给 Angular。然后我想在我的视图中通过 Object/Embed/Iframe 嵌入这个 PDF 文件。到目前为止，我有以下内容：

控制器：

[HttpGet]
[Route("api/PdfReports/GetReport")]
public byte[] Get()
{
    string directory = System.IO.Directory.GetCurrentDirectory();
    string fileName = "TERM.pdf";
    string filePath = Path.Combine(directory, fileName);            
    byte[] resultArray = System.IO.File.ReadAllBytes(Path.Combine(filePath));
    return resultArray;
}

查看：

<div *ngIf="dataLocalUrl != undefined">
    <h5>iframe using local url</h5>
    <iframe width="500" height="600" [attr.src]="dataLocalUrl" type="application/pdf"></iframe>
    <h5>object using local url</h5>
    <object [attr.data]="dataLocalUrl" type="application/pdf" width="100%" height="100%"></object>
    <h5>embed using local url</h5>
    <embed [attr.src]="dataLocalUrl" type="application/pdf" width="100%" height="100%">
</div>

以及组件：

import { Component, Inject } from '@angular/core';
import { HttpClient, HttpResponse, HttpHeaders } from '@angular/common/http';
import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
import { Observable } from 'rxjs/Observable';
import { Router } from '@angular/router';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw';  

@Component({
    selector: 'pdf-display',
    templateUrl: './pdfdisplay.component.html'
})

export class PdfDisplayComponent {
    datalocalURL: any;
    http: HttpClient;
    domSanitizer: DomSanitizer;

    constructor(private httpClient: HttpClient, @Inject('BASE_URL') baseURL: string, sanitizer: DomSanitizer) {
        this.http = httpClient;
        this.domSanitizer = sanitizer;
        this.httpClient.get(baseURL + 'api/PdfReports/GetReport', { responseType: 'arraybuffer' })
            .subscribe((data: any) => {
                var pdfFile = new Blob([data._body], { type: 'application/pdf' });
                this.datalocalURL = this.domSanitizer.bypassSecurityTrustResourceUrl(window.URL.createObjectURL(pdfFile));
            });
    }
}

问题是虽然数据正确地通过控制器，但当我调试组件时，数据总是返回未定义。有人可以帮帮我吗？

【问题讨论】：

标签： angular angular5

【解决方案1】：

这种方法对我很有效：

控制器：

[HttpGet("pdf/{docId}")]
public ActionResult GetPdf(int docId)
{
  var byteArray = get byte array...
  var cd = new System.Net.Mime.ContentDisposition
  {
      FileName = "Pdf_" + docId + ".pdf",
      Inline = true
  };

  Response.Headers.Add("Content-Disposition", cd.ToString());

  return File(outputBytes, "application/pdf");
}

let headers = new HttpHeaders();
headers = headers.set('Accept', 'application/pdf');
this._http.get(url, {headers: headers, responseType: 'blob'}).subscribe(
 res => {
      this.pdfResult = this.domSanitizer.bypassSecurityTrustResourceUrl(
          URL.createObjectURL(res)
      );
  },
  err => {
    // ERROR HANDLING HERE
  });

&lt;iframe [src]="pdfResult" ..../&gt;

【讨论】：

【解决方案2】：

这对我有用！

查看：

<div style="display: flex;align-items: center;justify-content: center;">
  <iframe width="800" height="500" src="" type="application/pdf"></iframe>
</div>

组件：

this.service.getData(id).pipe(tap(byteArray=>
{
   let newBlob = new Blob([byteArray], { type: "application/pdf" });
   this.datalocalURL = window.URL.createObjectURL(newBlob);
   document.querySelector("iframe").src = this.datalocalURL;
})).subscribe();

【讨论】：