PDF Viewer

::pdf[./assets/lehrplan-ofi.pdf]

http://localhost:3000

Laden...

Optionen

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

• src/plugins/remark-pdf
• src/components/PdfViewer

npm

yarn add react-pdf@^9.1.1

docusaurus.config.ts

import CopyWebpackPlugin from 'copy-webpack-plugin';
import pdfPlugin from './src/plugins/remark-pdf/plugin';

const pdfjsDistPath = path.dirname(require.resolve('pdfjs-dist/package.json'));
const cMapsDir = path.join(pdfjsDistPath, 'cmaps');
const getCopyPlugin = (
  currentBundler: CurrentBundler
): typeof CopyWebpackPlugin => {
  if (currentBundler.name === 'rspack') {
    // @ts-expect-error: this exists only in Rspack
    return currentBundler.instance.CopyRspackPlugin;
  }
  return CopyWebpackPlugin;
}

const REMARK_PLUGINS = [
    /* ... */
    pdfPlugin
];
const config: Config = {
    plugins: [
        () => {
            return {
                name: 'pdfjs-copy-dependencies',
                configureWebpack(config, isServer, {currentBundler}) {
                const Plugin = getCopyPlugin(currentBundler);
                    return {
                        resolve: {
                            alias: {
                                canvas: false
                            }
                        },
                        plugins: [
                            new Plugin({
                                patterns: [
                                    {
                                        from: cMapsDir,
                                        to: 'cmaps/'
                                    }
                                ]
                            })
                        ]
                    };
                }
            }
        }
    ]
}