Zum Hauptinhalt springen

PDF Viewer

::pdf[./assets/lehrplan-ofi.pdf]
http://localhost:3000
Laden...

Optionen​

scroll
Wenn vorhanden, wird das ganze PDF Dokument als Scroll-Container angezeigt.
page
number - Zeigt nur die angegebene Seite des PDF Dokuments an.
scale
Skalierungs-Faktor des PDF Dokuments - kann als Zoom verwendet werden.
noDownload
Versteckt den Download Button.
minWidth
Minimale Breite des PDF Viewers.
width
Breite des PDF Viewers.
Standardmässig auf 100% gesetzt.
z.B. width=200px
height
Höhe des PDF Viewers.
Standardmässig wird eine ganze Seite angezeigt.
z.B. height=200px

Einzelne Seite anzeigen (page)​

Es wird nur die angegebene Seite angezeigt.

::pdf[./assets/lehrplan-ofi.pdf]{page=3}
http://localhost:3000
Laden...

Fortlaufende Darstellung (scroll)​

Alle Seiten werden scrollbar untereinander angezeigt.

::pdf[./assets/lehrplan-ofi.pdf]{scroll}
http://localhost:3000
Laden...

Breite (width)​

Die Breite des Viewers, wobei die maximale Breite 100 % beträgt.

::pdf[./assets/lehrplan-ofi.pdf]{width=200}
http://localhost:3000
Laden...

Minimale Breite (minWidth)​

Die minimale Breite des Viewers - falls diese Breite grösser als die Breite des Viewers ist, wird ein Scroll-Fenster angezeigt.

::pdf[./assets/lehrplan-ofi.pdf]{minWidth=2000}
http://localhost:3000
Laden...
Abgeschnittene Inhalte

Bei einer grosse Mindestbreite kann es zu abgeschnittenen Inhalten kommen.

Skalierung (scale)​

Ein Skalierungsfaktor der mit der aktuellen Breite multipliziert wird.

::pdf[./assets/lehrplan-ofi.pdf]{scale=0.5}
http://localhost:3000
Laden...

Kein Download (noDownload)​

Das PDF kann nicht heruntergeladen werden - der Download-Button wird ausgeblendet.

::pdf[./assets/lehrplan-ofi.pdf]{noDownload}
http://localhost:3000
Laden...

Installation​

docusaurus/faster

Dieses Plugin ist auch mit @docusaurus/faster kompatibel.

Code
  • packages/remark-pdf

Danach yarn install ausführen.

Site Configuration
siteConfig.ts
import pdfPlugin from '@tdev/remark-pdf/remark-plugin';

const getSiteConfig: SiteConfigProvider = () => {
    return {
        remarkPlugins: [
            pdfPlugin
        ]
    };
};
docusaurus.config.ts
import { remarkPdfPluginConfig } from '@tdev/remark-pdf';

const config: Config = {
    plugins: [
        remarkPdfPluginConfig
    ]
}
CC 4.0