PDF/CSV Betrachter

[Volker]

Hallo zusammen,

in Zusammenarbeit mit Tommy haben wir diesen netten kleinen PDF Viewer erstellt:



Zu finden unter Tools auf meiner Webseite: https://www.niederastroth.de/mobirisebl ... t=VN+Tools

vn-pdf-viewer

Tutorial von Tommy: https://www.mobirise-tutorials.com/VN-B ... Excel.html

[Tommy Herrmann]

Meiner Meinung nach ist es sehr nützlich und ausgesprochen einfach zu bedienen. Prima Idee

[Tommy Herrmann]

Moin Volker,

Die neue Version 21 für den "VN-PDF-Viewer" ist im Download.

Ich ergänze Version 19 um eine Blockeigenschaft „Zeilen beim Start“ als Dropdown mit 10, 25, 50 und 100; Standard bleibt 25. Die Auswahl steuert dann direkt die bereits vorhandene Seitengrößen-Auswahl der veröffentlichten Tabelle.

Die Einstellung wird nur wirksam, wenn „Seitenblättern anzeigen“ eingeschaltet ist. Ist die Paginierung ausgeschaltet, bleibt das bisherige Verhalten sinnvollerweise erhalten und alle Zeilen werden angezeigt. Ich baue die Startauswahl so ein, dass Mobirise den gewählten Wert in den Block schreibt und die sichtbare Seitenauswahl beim Laden automatisch darauf gesetzt wird.

[Volker]

Aktuelle Version im Download

[Dieter53]

Ich habe das mal eingebaut und muss sagen, ist schon ein tolles Teil. Ich habe eine neue Seite in meinem Projekt erstellt und sie PDF Dokumente genannt, dann verlinkt. Hier erscheinen jetzt 9 PDF Dokumente auf dieser neuen Seite.
Jetzt kann jedes Mitglied für sich entscheiden, ob er es runter laden will, speichern oder sonstige Einstellungen vornehmen will.
Die letzte eingefügte PDF erscheint ja immer unten. Wenn ich sie nach oben haben will, muss ich sie ja durch ziehen nach oben oder wo auch immer ich hin haben will. Das ist sehr umständlich. Bei einer Stufe nach oben kein Problem. Oder gibt es da andere Möglichkeiten?

[Tommy Herrmann]

Moin,

Muss man ein wenig trainieren, dann geht das schon.

Versuche mal den Block als User-Block zu speichern, dann lässt er sich ganz gut an die gewünschte Stelle einfügen.

Nicht vergessen solche Blöcke dann aus den User-Blöcken wieder zu löschen.

[Dieter53]

Danke, das versuche ich dann mal, jetzt passt es erste einmal so.

[Tommy Herrmann]

Volker,

ich habe einen Fehler auf dem Smartphone im VN‑PDF‑Viewer festgestellt. Die Werkzeugleiste verursacht einen Überlauf und ist nur durch horizontales Scrollen vollständig sichtbar.

Ich habe das bereits auf meiner Seite repariert:

https://www.mobirise-tutorials.com/VN-B ... PDF-Viewer

Bitte weise deine KI an, sämtlichen Code — insbesondere CSS — nicht zu minimieren, sondern stets schön formatiert (‚pretty‘) auszugeben, da er sonst kaum editierbar ist.

Entferne diese CSS komplett aus der HTML:

Code: Alles auswählen

    <style>.vn-pdf-flaeche{width:100%}.vn-pdf-inhalt{max-width:100%;margin-left:auto;margin-right:auto}.vn-pdf-titel{text-align:center;margin-bottom:1.2rem}.vn-pdf-rahmen{border-radius:10px;overflow:hidden;box-shadow:0 4px 24px rgba(0,0,0,.12);border:1px solid rgba(0,0,0,.08)}.vn-pdf-frame{width:100%;border:none;display:block}@media (max-width:767px){.vn-pdf-frame{height:70vh!important}}</style>

Ersetze die entfernte CSS mit meiner CSS unten und veröffentliche die so geänderte .mbrext-Datei erneut:

Code: Alles auswählen

    <style>
    .vn-pdf-flaeche {
        width: 100%;
    }

    .vn-pdf-inhalt {
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .vn-pdf-titel {
        text-align: center;
        margin-bottom: 1.2rem;
    }

    .vn-pdf-rahmen {
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 4px 24px rgba(0,0,0,.12);
        border: 1px solid rgba(0,0,0,.08);
    }

    .vn-pdf-frame {
        display: block;
        width: 100%;
        max-width: 100%;
        border: none;
    }

    @media (max-width: 767px) {
        /*
         * Die Mobirise-/Bootstrap-Seitenabstände würden den iframe
         * auf etwa 336px verkleinern. PDF.js benötigt mindestens 350px.
         */
        .vn-pdf-host .container {
            width: 100%;
            max-width: none;
            padding-left: 0 !important;
            padding-right: 0 !important;
        }

        /*
         * Die am Desktop gewählte Breite wird auf dem Handy aufgehoben,
         * damit der Viewer die gesamte Displaybreite verwenden kann.
         */
        .vn-pdf-host .vn-pdf-inhalt {
            width: 100% !important;
            max-width: 100%;
        }

        .vn-pdf-host .vn-pdf-titel {
            padding-left: 12px;
            padding-right: 12px;
        }

        .vn-pdf-host .vn-pdf-frame {
            width: 100%;
            max-width: 100%;
            height: 70vh !important;
        }
    }
    </style>

[Volker]

erledigt

Alles nun in Schön

[Tommy Herrmann]

Moin Volker,

ich habe da noch eine wichtige Änderung am PDF-Viewer vorgenommen. Man konnte den Inhalt ändern, sowohl Texte und auch Bilder online hinzufügen

Ich habe jetzt einen Schalter eingebaut, der per Default ausgeschaltet ist und mit dem man diese Viewer-Funktion explizit einschalten müsste.

https://www.mobirise-tutorials.com/VN-B ... PDF-Viewer

Ich sende Dir gleich die neue .mbrext-Erweiterung als Version 23 für das "VN Menü".