HTML zu PDF in Power Apps Canvas Apps mit einer PCF Komponente

HTML zu PDF in Power Apps Canvas Apps mit einer PCF Komponente fuer Inline Vorschau, Drucken und optionalen PDF Download, fuer Microsoft Power Platform.

Harllens George | 2026-02-26

Dieser Leitfaden zeigt eine einfache Loesung fuer HTML zu PDF in Power Apps Canvas Apps mit einer PCF Komponente fuer Microsoft Power Platform. Sie ist fuer Business Apps gedacht, in denen du bereits HTML hast und eine saubere Vorschau plus einen zuverlaessigen Export brauchst.

Wichtig: Du bekommst eine gute v1 Experience ohne zusaetzlichen Backend Konverter, und ohne dass Power Automate fuer Print oder Download zwingend notwendig ist.

Was du damit machen kannst

HTML direkt in der App anzeigen (Vorschau)
Ueber den Browser drucken (Save as PDF)
Optional ein PDF direkt herunterladen
PDF als Base64 erhalten, um es z.B. per Power Automate in SharePoint oder andere Systeme zu speichern

Fuer wen ist das gedacht

Power Platform Maker mit Dokument Workflows in Canvas Apps
Teams, die konsistentes Export Verhalten ueber mehrere Screens wollen
Projekte, die zuerst eine clientseitige v1 Loesung ohne Server Rendering wollen

Get it

GitHub Repository: Just-Boring-Cat/html-pdf-converter-pcf

So nutzt du es (High Level)

Solution importieren und die PCF Komponente in die Canvas App einfuegen.
Den HTML String an die Komponente uebergeben.
Layout in der Inline Vorschau pruefen.
Per Print zu PDF exportieren (empfohlen) oder optional downloaden.

Screenshots

Komponente in einer Canvas App

Power Apps Canvas App HTML zu PDF Komponente Vorschau.

Properties (Maker Konfiguration)

Power Apps Canvas App HTML zu PDF Komponente Properties und Konfiguration.

Beispiel Ausgabe ueber den Print Flow

Beispiel Print Flow und generierte Ausgabe Vorschau.

Beispiel HTML Vorlage

Wenn du direkt starten willst, kannst du diese einseitige Vorlage in die Komponente kopieren. Sie nutzt inline CSS und enthaelt ein Beispiel Logo als Base64, dadurch funktioniert sie auch dann gut, wenn externe Assets geblockt werden.

<!doctype html>
<html lang="de">
<head>
  <meta charset="utf-8" />
  <title>The Boring Cat | HTML zu PDF Beispiel</title>
  <style>
    :root { --paper: #ffffff; --ink: #1f2937; --line: #d8e2f0; }
    body { margin: 0; font-family: "Segoe UI", Arial, sans-serif; color: var(--ink); }
    .page { width: 210mm; min-height: 297mm; margin: 0 auto; padding: 9mm; background: var(--paper); border: 1px solid var(--line); }
    .hero { display: grid; grid-template-columns: 72px 1fr; gap: 10px; align-items: center; }
    .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .card { border: 1px solid var(--line); border-radius: 12px; padding: 10px; }
  </style>
</head>
<body>
  <div class="page">
    <header class="hero">
      <img alt="Logo" src="data:image/png;base64,..." />
      <div>
        <h1>The Boring Cat</h1>
        <div>HTML zu PDF Beispiel</div>
      </div>
    </header>
    <section class="grid">
      <div class="card">...</div>
      <div class="card">...</div>
    </section>
  </div>
</body>
</html>

[[htmlsample:/content/documents/power-apps-html-to-pdf-pcf-component-canvas-apps/samples/the-boring-cat-one-page-sample.html]]

Print oder Download ueber Canvas Buttons triggern

Du kannst die Buttons im Component UI nutzen, oder Actions ueber normale Canvas Buttons ausloesen.

High Level Idee:

Eine Canvas Variable an den Command Input der Komponente binden (zum Beispiel actionCommand).
Die Variable per Button Klick mit einem JSON Command String setzen.
Die Komponente fuehrt den Command aus und updated Outputs.

Beispiel (Power Fx, Download):

Set(
    varPdfCmd,
    Concatenate(
        "{",
        Substitute(
            quot;'id':'{GUID()}','action':'download'",
            "'",
            Char(34)
        ),
        "}"
    )
);

Beispiel (Power Fx, Print):

Set(
    varPdfCmd,
    Concatenate(
        "{",
        Substitute(
            quot;'id':'{GUID()}','action':'print'",
            "'",
            Char(34)
        ),
        "}"
    )
);

Screenshots:

Canvas Button Command Beispiel fuer Download.

Canvas Button Command Beispiel fuer Print.

PDF Output als Base64 (fuer SharePoint und Automatisierung)

Wenn du das generierte PDF extern speichern willst, nutze den Base64 Output der Komponente und uebergib ihn an Power Automate (zum Beispiel fuer SharePoint Uploads).

Beispiel (Power Automate Expression, haeufiges Pattern):

base64ToBinary(last(split(pdfBase64, ",")))

Praktische Tipps

Nutze Print zu PDF als Standard, wenn Layout Fidelity wichtig ist.
Print oder Download funktionieren ohne Flows. Power Automate ist hilfreich, wenn du das PDF automatisch speichern willst.
Nutze Base64 Bilder im HTML, um CORS und geblockte Assets zu vermeiden.
Zeilenumbrueche sind normales HTML. Nutze <div>, <p>, oder <br> wie im Web.
Fuer sehr grosse Dokumente ist spaeter ein Backend Renderer sinnvoll.

Bekannte Tradeoffs

Drucken haengt vom Browser Verhalten und User Interaction ab.
Der clientseitige Download kann rasterisiert sein und ist nicht ideal fuer durchsuchbare PDFs.

Fazit

Wenn du HTML zu PDF in Power Apps Canvas Apps brauchst, ist diese PCF Komponente ein praktischer Weg: Vorschau, Print, optionaler Download, und ein Setup, das gut zu Microsoft Power Platform Projekten passt.