如何在Angular 5中渲染PDF？附Java REST服务端代码说明

Hey there! Let's walk through how to render that PDF from your Java REST service in Angular 5. I've got a couple of solid approaches for you—one using native Angular features, and another with a popular PDF viewer library if you want more functionality.

First, a quick tweak for your Java service to follow HTTP standards:

Your current Content-Disposition header can be optimized to inline; filename=tripPdf.pdf. This explicitly tells browsers the file is meant to be displayed inline (it's not strictly required for Angular's blob handling, but it makes the response more compliant).

Method 1: Native Angular + Iframe (Lightweight & Simple) #

This approach uses no extra dependencies, just Angular's built-in tools to handle the blob data and render it via an iframe.

1. Create an API Service to Fetch the PDF Blob

First, build a service (e.g., TripService) to call your REST endpoint. Make sure to specify responseType: 'blob' since we're fetching binary PDF data:

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class TripService {
  private apiBaseUrl = 'http://your-api-domain.com'; // Replace with your actual API URL

  constructor(private http: HttpClient) { }

  getTripPdf(tripId: number): Observable<Blob> {
    const requestHeaders = new HttpHeaders({
      'Accept': 'application/pdf'
    });

    return this.http.get(`${this.apiBaseUrl}/Trip/PDF/${tripId}`, {
      headers: requestHeaders,
      responseType: 'blob' as 'json' // Type assertion needed for Angular 5 compatibility
    });
  }
}

2. Handle PDF Data in Your Component

In your component, call the service to get the blob, create a safe object URL (to bypass Angular's DOM security restrictions), and prepare it for rendering:

import { Component, OnInit, OnDestroy } from '@angular/core';
import { TripService } from './trip.service';
import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';

@Component({
  selector: 'app-trip-pdf',
  templateUrl: './trip-pdf.component.html'
})
export class TripPdfComponent implements OnInit, OnDestroy {
  pdfSafeUrl: SafeResourceUrl | null = null;
  private objectUrl: string | null = null;

  constructor(
    private tripService: TripService,
    private sanitizer: DomSanitizer
  ) { }

  ngOnInit() {
    const targetTripId = 123; // Replace with your actual trip ID (e.g., from route params)
    this.tripService.getTripPdf(targetTripId).subscribe(
      (pdfBlob: Blob) => {
        // Create an object URL pointing to the blob data
        this.objectUrl = URL.createObjectURL(pdfBlob);
        // Sanitize the URL to avoid Angular's security block
        this.pdfSafeUrl = this.sanitizer.bypassSecurityTrustResourceUrl(this.objectUrl);
      },
      (error) => {
        console.error('Failed to load PDF:', error);
        // Add user-friendly error handling here, like showing a "PDF load failed" message
      }
    );
  }

  ngOnDestroy() {
    // Clean up the object URL to prevent memory leaks
    if (this.objectUrl) {
      URL.revokeObjectURL(this.objectUrl);
    }
  }
}

3. Component Template (HTML)

Use an iframe to render the sanitized URL:

<div class="pdf-container">
  <div *ngIf="!pdfSafeUrl" class="loading">Loading PDF...</div>
  <iframe 
    *ngIf="pdfSafeUrl" 
    [src]="pdfSafeUrl" 
    width="100%" 
    height="800px" 
    type="application/pdf"
    frameborder="0">
    Your browser does not support inline PDF viewing.
  </iframe>
</div>

Method 2: Use ngx-pdf-viewer (For Advanced Features) #

If you need PDF interactions like zoom, search, or pagination, ngx-pdf-viewer is a great choice. Just make sure to install a version compatible with Angular 5:

1. Install the Dependency

npm install ngx-pdf-viewer@5.3.0 --save

2. Import the Module

Add the module to your feature or root module:

import { PdfViewerModule } from 'ngx-pdf-viewer';

@NgModule({
  imports: [
    // ... Other modules (e.g., BrowserModule, HttpClientModule)
    PdfViewerModule
  ]
})
export class YourFeatureModule { }

3. Update Component Code

Convert the blob to a Uint8Array for the library to use:

import { Component, OnInit } from '@angular/core';
import { TripService } from './trip.service';

@Component({
  selector: 'app-trip-pdf',
  templateUrl: './trip-pdf.component.html'
})
export class TripPdfComponent implements OnInit {
  pdfData: Uint8Array | null = null;

  constructor(private tripService: TripService) { }

  ngOnInit() {
    const targetTripId = 123;
    this.tripService.getTripPdf(targetTripId).subscribe(
      (pdfBlob: Blob) => {
        const reader = new FileReader();
        reader.onload = () => {
          this.pdfData = new Uint8Array(reader.result as ArrayBuffer);
        };
        reader.readAsArrayBuffer(pdfBlob);
      },
      error => console.error('PDF load error:', error)
    );
  }
}

4. Use the Viewer in the Template

<div *ngIf="!pdfData">Loading PDF...</div>
<ngx-pdf-viewer 
  *ngIf="pdfData"
  [src]="pdfData"
  [render-text]="true"
  [zoom]="1.0"
  style="width: 100%; height: 800px; display: block;">
</ngx-pdf-viewer>

Both methods work perfectly with your existing Java REST service. Go with Method 1 for a lightweight, no-frills display, or Method 2 if you need interactive PDF features.

内容的提问来源于stack exchange，提问作者user2304483