DocumentViewer

Darstellung der Formate

Der Regelfall: Der Viewer steht als eigenständiges Element auf der Seite und zeigt das Dokument beim Laden. Über die Schaltflächen lässt sich durchspielen, was er aus den Formaten macht – PDF mit Seitennavigation, Bild mit Zoom und Drehung, defekte Dateien und ein nicht unterstütztes Format jeweils mit dem Rückfall auf Hinweis und Download-Link.

@model DarstellungBeispielViewModel

@* Die Schaltflächen laden dieselbe Seite mit einem anderen Dokument – der Viewer wird also jedes Mal
   ganz gewöhnlich serverseitig konfiguriert. Wie man ihn stattdessen aus JavaScript umschaltet, zeigt
   das Beispiel «Clientseitiger Aufruf». *@
<div class="mb-3 d-flex gap-2 flex-wrap">
    @foreach (var dokument in DarstellungBeispielViewModel.Dokumente)
    {
        <a asp-area="PDFViewer"
           asp-controller="Demo"
           asp-action="ViewerDarstellung"
           asp-route-auswahl="@dokument.Schluessel"
           class="btn btn-sm @(dokument.Schluessel == Model.Auswahl ? "btn-primary" : "btn-outline-primary")">
            @dokument.Titel
        </a>
    }
</div>

@* Das Format kommt aus DocumentSupport, abgeleitet aus dem Dateinamen – .pdf ergibt Pdf,
   .jpg/.jpeg/.png ergibt Image, alles andere None. *@
@Html.Fmh(Fmh.DokumentViewer()
    .Document(Model.Aktuell.Url, Model.Aktuell.Name, Model.Aktuell.Typ))

using System.Collections.Generic;
using System.Linq;

namespace FMH.Komponente.WebUI.Areas.PDFViewer.Models
{
    /// <summary>
    /// Die Auswahl der Demo-Seite «Darstellung»: ein Viewer, umschaltbar über die Dokumente.
    /// </summary>
    public class DarstellungBeispielViewModel
    {
        public static IReadOnlyList<DokumentAuswahl> Dokumente { get; } = new List<DokumentAuswahl>
        {
            new DokumentAuswahl("pdf", "PDF", "/documents/PdfDokument.pdf"),
            new DokumentAuswahl("bild", "Bild", "/documents/beleg.jpg"),
            new DokumentAuswahl("pdf-korrupt", "Korruptes PDF", "/documents/PdfKorrupt.pdf"),
            new DokumentAuswahl("bild-korrupt", "Korruptes Bild", "/documents/BildKorrupt.jpg"),
            new DokumentAuswahl("nicht-unterstuetzt", "Nicht unterstützt", "/documents/Einsprachemail.msg"),
        };

        public string Auswahl { get; set; } = "pdf";

        public DokumentAuswahl Aktuell =>
            Dokumente.FirstOrDefault(dokument => dokument.Schluessel == this.Auswahl) ?? Dokumente[0];
    }
}

Darstellung

PDF Bild Korruptes PDF Korruptes Bild Nicht unterstützt

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.