DocumentViewer

Zweispaltig mit Sachdaten

In ERP-Systemen das häufigste Muster: links die Sachdaten, rechts der Beleg. Der Viewer ist ein gewöhnliches Element im Bootstrap-Raster und braucht keine Sonderbehandlung.

@* Zweispaltiges Layout, wie es in ERP-Systemen üblich ist: links die Sachdaten, rechts die
   Vorschau des Belegs. Der Viewer ist ein gewöhnliches Element im Raster – er braucht keinen
   eigenen Rahmen und keine feste Breite. *@
<div class="row g-4">
    <div class="col-12 col-xl-5">
        <h2 class="h5">Beleg 2026-0042</h2>
        <dl class="row mb-0">
            <dt class="col-5">Einreichung</dt>
            <dd class="col-7">14.03.2026</dd>

            <dt class="col-5">Antragsteller</dt>
            <dd class="col-7">Hans Muster</dd>

            <dt class="col-5">Fachgebiet</dt>
            <dd class="col-7">Allgemeine Innere Medizin</dd>

            <dt class="col-5">Status</dt>
            <dd class="col-7"><span class="badge text-bg-warning">In Prüfung</span></dd>

            <dt class="col-5">Betrag</dt>
            <dd class="col-7">CHF 1'250.00</dd>
        </dl>
    </div>
    <div class="col-12 col-xl-7">
        @Html.Fmh(Fmh.DokumentViewer()
            .Document("/documents/PdfDokument.pdf", "PdfDokument.pdf", DocumentType.Pdf))
    </div>
</div>

Darstellung

Beleg 2026-0042

Einreichung: 14.03.2026
Antragsteller: Hans Muster
Fachgebiet: Allgemeine Innere Medizin
Status: In Prüfung
Betrag: CHF 1'250.00

Der DocumentViewerBuilder wird über Fmh.DokumentViewer() erzeugt und mit @Html.Fmh(...) gerendert:

@Html.Fmh(Fmh.DokumentViewer()
    .Document("/documents/PdfDokument.pdf", "PdfDokument.pdf", DocumentType.Pdf))

Ohne .Document(...) entsteht nur das Skelett; das Dokument kommt dann zur Laufzeit über initDocumentViewer(...).

Konfiguration

Methode	Erklärung
`.Document(url, name, type)`	Adresse des Dokuments, angezeigter Name in der Werkzeugleiste und Format. `type` ist `DocumentType.Pdf`, `.Image` oder `.None`. Ohne Aufruf bleibt der Viewer leer.

Unterstützte Formate

Wert	Darstellung
`DocumentType.Pdf`	Über pdf.js im Canvas. Werkzeugleiste mit Seitennavigation, Zoom, Drehung, Download.
`DocumentType.Image`	Direkt im Canvas, ohne pdf.js. Werkzeugleiste ohne Seitennavigation. Unterstützt sind `.jpg`, `.jpeg`, `.png`.
`DocumentType.None`	Keine Vorschau, stattdessen Hinweistext und Download-Link.

Den Typ nicht selbst bestimmen

DocumentSupport leitet das Format aus dem Dateinamen ab — das ist verlässlicher, als den Typ an jeder Aufrufstelle zu tippen:

Methode	Rückgabe
`DocumentSupport.GibTypFuerViewer(dateiname)`	`DocumentType` — für den Aufruf von `.Document(...)`.
`DocumentSupport.GibTypAlsStringFuerViewer(dateiname)`	Derselbe Wert kleingeschrieben als Zeichenkette — für Attribute und für `initDocumentViewer(...)`.
`DocumentSupport.GibDokumentAttributFuerViewerDialog(dateiname)`	Das fertige Attribut `data-siwf-documentviewer-type="…"` — für Links, die den Dialog öffnen sollen.

Alles, was nicht .pdf, .jpg, .jpeg oder .png ist, ergibt None.

Clientseitiger Aufruf

Das Modul stellt drei Funktionen global bereit:

Funktion	Zweck
`initDocumentViewer(url, name, typ)`	Lädt ein Dokument in den bereits gerenderten Viewer. `typ` ist der Enum-Wert kleingeschrieben: `'pdf'`, `'image'`, `'none'`.
`initDocumentViewerEvents()`	Hängt die Werkzeugleiste an. Der Viewer ruft das beim Laden der Seite selbst auf.
`attachDocumentViewerForAttributedLinks()`	Schliesst Links mit `data-siwf-documentviewer-type` an den Dialog an.

Ein Viewer je Seite

Das Skelett arbeitet mit festen Ids (siwf-pdf-viewer, page_num, first, prev, zoominbutton …). Zwei Viewer auf derselben Seite steuern sich gegenseitig — auch der Dialog bringt dasselbe Skelett mit. Pro Seite ist deshalb entweder ein eigenständiger Viewer oder der Dialog vorgesehen, nicht beides. Aus demselben Grund hat in dieser Demo jedes Beispiel eine eigene Seite.

Voraussetzung

Das Skript wird nicht von Hand eingebunden. documentviewer.js ist als natives ES-Modul im Modulkatalog des Pakets eingetragen (PdfViewerModuleSetup, Platzierung Head) und wird geladen, sobald die Anwendung das Paket referenziert und AddBundledAssets() aufruft. Die Anleitung dazu steht unter Bundles → Native ES-Module einbinden.