Ein bestehendes PDF ausfüllen

Ein Antragsformular, ein Vertrag mit Feldern: inject(JasyForms) liest und füllt das Formular eines PDFs, das Sie schon haben. Die Quelle ist eine URL, die File eines <input type="file"> oder Bytes. Das funktioniert im Browser und auf dem Server.

Der PDF-Reader wird bei der ersten Nutzung geladen, eine App, die nur PDFs erzeugt, lädt ihn also nie.

Live aus einem Angular-Formular

filledPdfResource() füllt das PDF neu, sobald sich seine Werte ändern, und lädt die Quelle nur einmal. Wie pdfResource hat es latest() für die Vorschau.

// application.ts
import { Component, inject } from "@angular/core";
import { FormControl, FormGroup, ReactiveFormsModule } from "@angular/forms";
import { toSignal } from "@angular/core/rxjs-interop";
import { JasyForms, JasyPdf, filledPdfResource } from "@jasy/angular";

const SOURCE = "/forms/application.pdf";

@Component({
  selector: "app-application",
  imports: [ReactiveFormsModule],
  template: `
    <form [formGroup]="form">
      <input formControlName="full_name" />
      <input type="checkbox" formControlName="agree" />
    </form>
    @if (preview.latest(); as pdf) {
      <iframe [src]="pdf.safeUrl" title="Application"></iframe>
    }
    @if (preview.error(); as error) {
      <p>{{ error.message }}</p>
    }
    <button (click)="send()">Download</button>
  `,
})
export class Application {
  private readonly forms = inject(JasyForms);
  private readonly pdf = inject(JasyPdf);

  readonly form = new FormGroup({
    full_name: new FormControl(""),
    agree: new FormControl(false),
  });

  // The PDF fills itself as the user types. The source is loaded once.
  readonly preview = filledPdfResource(
    SOURCE,
    toSignal(this.form.valueChanges, { initialValue: this.form.value }),
  );

  async send() {
    // flatten: the values become page content and can no longer be edited.
    const { bytes } = await this.forms.fill(SOURCE, this.form.value, { flatten: true });
    await this.pdf.download(bytes, "application.pdf");
  }
}

Die Feldnamen sind die des PDFs selbst. inject(JasyForms).read(source) listet sie auf, mit ihren Typen und Auswahlmöglichkeiten.

inject(JasyForms)

read() gibt undefined für ein PDF ohne Formular zurück. Ein Wert undefined lässt sein Feld, wie es ist, so wie ein Angular-Formular ein deaktiviertes Control auslässt. Eine Zahl wird als ihr Text eingetragen, so wie ein Zahlenfeld sie liefert. Die Optionen sind die der Engine, etwa password für ein verschlüsseltes PDF: siehe Ein fremdes Formular ausfüllen.

Eine URL geht über den HttpClient, Ihre Interceptors greifen also - ein Auth-Header erreicht auch ein geschütztes Formular.

filledPdfResource()

filledPdfResource(source, values, { options?, injector? })

• source ist eine URL, ein Blob oder Bytes, oder eine Funktion, die eines davon liefert. Es wird einmal je Quelle geladen, nicht einmal je Änderung.
• values wird gelesen wie resource({ params }). Geben Sie daraus, oder aus source, undefined zurück, um zu warten.
• options sind die Fill-Optionen, und eine Funktion wird wie values verfolgt.

Es ist dieselbe Resource wie pdfResource, latest() eingeschlossen, und wie diese bleibt es auf dem Server untätig.