Angular 5 - 从 byte[] 显示嵌入的 PDF [英] Angular 5 - Display Embedded PDF from byte[]

问题描述

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

控制器:

[HttpGet][Route("api/PdfReports/GetReport")]公共字节[] Get(){字符串目录 = System.IO.Directory.GetCurrentDirectory();字符串文件名 = "TERM.pdf";string filePath = Path.Combine(directory, fileName);byte[] resultArray = System.IO.File.ReadAllBytes(Path.Combine(filePath));返回结果数组；}

查看:

<h5>iframe 使用本地 url</h5><iframe width="500" height="600" [attr.src]="dataLocalUrl" type="application/pdf"></iframe><h5>对象使用本地 url</h5><object [attr.data]="dataLocalUrl" type="application/pdf" width="100%" height="100%"></object><h5>使用本地网址嵌入</h5><embed [attr.src]="dataLocalUrl" type="application/pdf" width="100%" height="100%">

和组件:

import { Component, Inject } from '@angular/core';从@angular/common/http"导入 { HttpClient, HttpResponse, HttpHeaders };从@angular/platform-b​​rowser"导入 { DomSanitizer, SafeResourceUrl };从 'rxjs/Observable' 导入 { Observable };从@angular/router"导入{路由器}；导入 'rxjs/add/operator/map';导入 'rxjs/add/operator/catch';导入 'rxjs/add/observable/throw';@成分({选择器:'pdf-display',templateUrl: './pdfdisplay.component.html'})导出类 PdfDisplayComponent {数据本地网址:任何；http: HttpClient;domSanitizer:DomSanitizer；构造函数(私有httpClient:HttpClient，@Inject('BASE_URL')baseURL:字符串，消毒剂:DomSanitizer){this.http = httpClient;this.domSanitizer = 消毒剂；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));});}}

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

解决方案

这种方法对我很有效:

控制器:

[HttpGet("pdf/{docId}")]公共 ActionResult GetPdf(int docId){var byteArray = 获取字节数组...var cd = 新 System.Net.Mime.ContentDisposition{文件名 = "Pdf_" + docId + ".pdf",内联 = 真};Response.Headers.Add("Content-Disposition", cd.ToString());返回文件(输出字节，应用程序/pdf")；}

let headers = new HttpHeaders();headers = headers.set('Accept', 'application/pdf');this._http.get(url, {headers: headers, responseType: 'blob'}).subscribe(资源=>{this.pdfResult = this.domSanitizer.bypassSecurityTrustResourceUrl(URL.createObjectURL(res));},错误 =>{//这里的错误处理});

<iframe [src]="pdfResult" ..../>

I'm relatively new to Angular 5.0, and have read the documentation but I can't seem to make any progress. I have a .Net Core 2.0 project with an Angular 5 UI and am passing a byte[] of a PDF file from the API Controller to Angular. I would like to then embed this PDF file via Object/Embed/Iframe in my view. So far I have the following:

Controller:

[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;
}

View:

<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>

And the component:

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));
            });
    }
}

The problem is though the data is going correctly through the controller, when I debug the component the data always comes back undefined. Can anybody help me out please?

解决方案

This approach works fine for me:

Controller:

[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
  });

<iframe [src]="pdfResult" ..../>

这篇关于Angular 5 - 从 byte[] 显示嵌入的 PDF的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！