Ankündigung

Einklappen
Keine Ankündigung bisher.

Automatisches Scrollen einer PDF-Datei im Browser

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Automatisches Scrollen einer PDF-Datei im Browser

    Hallo, ich bin neu hier in diesem Forum und erhoffe mir ein paar Tipps.
    Ich beherrsche die Basics von HTML und CSS, kenne mich aber leider nur sehr marginal mit JavaScript und PHP aus. Nun möchte ich ein Problem lösen, finde aber im Netz bisher keine Antworten (z.B. in Form von Codeschnipseln).

    Mein Problem:
    Ich möchte eine Webseite erstellen, die eine im Webspace liegende PDF-Datei lädt und diese automatisch langsam von oben nach unten durchscrollt und dann wieder von unten nach oben. Manchmal hat diese PDF-Datei nur eine Seite, aber manchmal auch mehrere Seiten (maximal 3 oder 4). Da sich dieses PDF-Dokument durchaus mehrmals am Tag ändern kann, sollte es zyklisch (etwa alle 5 Minuten) neu geladen werden.

    Das Ganze soll für die Anzeige eines Vertretungsplans in einer Schule dienen.

  • #2
    Hi,
    Browser können PDF nur über Plugins in PDF-Readern anzeigen. Daher kannst Du die Anzeige in der HTML-Seite nicht steuern.

    Gruß
    Ingo
    Ingo Webdesign

    Kommentar


    • #3
      ansonsten wäre das automatische scrollen kein problem. Das kann man mit Javascript machen
      Mein (Basti1012) Forum und Chat

      Kommentar


      • #4
        Nuja, aber an das DOM ( nenne ich das jetzt mal ) des gerenderten PDF kommst Du wohl nicht so einfach ran, um dort mit JS scrolling reinzubauen.
        Über <iframe> könnte ich mir das noch vorstellen.
        PHProcks! » Tutorials

        Kommentar


        • #5
          So wie ich euch verstanden habe, kann man eine HTML-Seite mit Javascript automatisch scrollen lassen, aber die PDF-Datei nicht. Wenn man aber nun die PDF-Datei über iframe oder object-Tag fest in die HTML-Seite einbettet und diese Seite dann scrollen lässt, ginge das nicht?

          Und dann hätte ich eventuell noch einen anderen Ansatz:
          Man kann ja einem PDF-Reader eine PDF-Datei mit Kommandozeilenparametern übergeben, ggf. mit URL. Beim Adobe Reader habe ich aber leider keine passenden Parameter zum Auto-Scrollen gefunden. Zum Autoscrollen müsste man mit der Maus ran, was aber in unserem Fall nicht geht. Kennt ihr eventuell noch einen anderen PDF-Reader, bei dem das geht?

          Kommentar


          • #6
            Hi,
            Du kannst natürlich ein iframe einbinden und hierin eine PDF verlinken. Ob die PDF dann auch innerhalb des iframe angezeigt wird oder ein PDF-Reader extern geöffnet wird oder die PDF garnicht angezeigt wird, hängt dann von der Browserkonfiguration ab - kannst Du diese vorgeben?
            Und selbst wenn, ist mir kein PDF-Reader bekannt, der über einen entsprechenden Parameteraufruf den Inhalt automatisch scrollen geschweige denn neu laden würde.

            Du solltest Dich von dieser Idee verabschieden. In HTML müsstest Du die Daten schon direkt als Text einbinden, um sie über Javascript scrollen zu können und die Seite zeitgesteuert bzw. eher nach Änderungen neuladen zu können.

            Gruß
            Ingo
            Ingo Webdesign

            Kommentar


            • #7
              Zitat von Arne Drews Beitrag anzeigen
              Nuja, aber an das DOM ( nenne ich das jetzt mal ) des gerenderten PDF kommst Du wohl nicht so einfach ran, um dort mit JS scrolling reinzubauen.
              Über <iframe> könnte ich mir das noch vorstellen.
              Oh sorry. Habe das mit pdf irgendwie überlesen.Nagut ,ich glaube das man in den pdf ( Dom ) wohl nicht so einfach rein kommt. Kann man mit php so eine pdf Datei auseinander nehmen ?
              Vieleicht sollte er das pdf umwandeln als normale Textdatei oder anderes Format womit man mit Javascript auch zugriff hat und solche sachen wie Autoscroll möglich wären.

              Oder halt mit iframe einbinden und das iframe auto scrollen lassen. Aber das ist ja nicht das gleiche und auch nur nee notlösung. Auserdem wenn das pdf 10 Seiten hat müßte dann der iframe nicht auch 10 Seiten hoch sein damit das Scrollen überhaupt vernünftig laufen würde? Das verwirrt mich gerade etwas
              Mein (Basti1012) Forum und Chat

              Kommentar


              • #8
                Ich will nochmal den Hintergrund meiner Anfrage erklären:
                Es geht um den Vertretungsplan in einer Schule, der auf einem HD-Monitor für die Schüler angezeigt werden soll. Meine Kollegin, die den Plan erstellt, lädt diesen mit FTP als PDF-Datei in den Webspace. Dieser Plan kann an bestimmten Tagen 1 Seite umfassen, an anderen schon mal bis zu 4 Seiten. Mehr ist wohl noch nicht vorgekommen.
                An den Monitor, der das anzeigt, kommt man nicht heran, er befindet sich hinter einer Fensterscheibe. Es soll also alles vollständig automatisch ablaufen, inklusive der Aktualisierungen.
                Derzeit ist der Monitor an einen Windows-Rechner angeschlossen, es steht aber auch ein Raspberry Pi zur Verfügung.
                Auf anderen Monitoren braucht der Plan nicht dargestellt zu werden. Man kann also alle anderen Auflösungen außer Acht lassen.

                P.S. Ich weiß derzeit noch nicht, ob der Vertretungsplan auch im HTML-Format erzeugt werden kann. Im Moment weiß ich leider nur etwas von PDF.
                Vielen Dank übrigens, dass ihr mit mir überlegt!

                Kommentar


                • #9
                  Hi,
                  der Plan wird doch in einem Text- oder Tabellenprogramm erstellt und dann erst als PDF gespeichert. Genauso kann man ihn auch in einem einfachen Textformat wie TXT oder CSV speichern und mit einer Programmiersprache wie PHP darauf zugreifen und die Anzeige steuern.

                  Es geht aber ohne HTML viel einfacher z.B. mit einer Endlospräsentation z.B. in PowerPoint.

                  Gruß
                  Ingo
                  Ingo Webdesign

                  Kommentar


                  • #10
                    Nein, der Plan wird in einem Spezialprogramm erstellt (extrem teuer), weil es in einem Stundenplan viele Abhängigkeiten gibt, die ineinander greifen (Lehrer, Klassen, Räume, festgelegte Einschränkungen und unverrückbare Koppelungen). Im Kopf kann man so etwas kaum mehr lösen. Der Hersteller dieses Programms bietet natürlich auch ein Online-Modul an, womit man mein beschriebenes Problem der Displayanzeige lösen kann, aber es ist so extrem teuer, dass ich erstmal nach Alternativen mit Standard-Webtechnologie suche.

                    Wie gesagt: mein gegenwärtiger Stand ist, dass eine PDF-Datei in einem Webspace liegt und der HD-Bildschirm diese selbstständig anzeigen soll mit Autoscroll und zyklischen Refreshs.
                    Nächste Woche mache ich mich mal schlau, ob es doch einen Weg gibt, statt der PDF-Datei eine HTML-Datei zu exportieren.

                    Kommentar


                    • #11
                      Hi,
                      den Inhalt der PDF könnte man aber entweder als Text exportieren oder Grafiken hieraus erstellen. Diese ließen sich dann in PowerPoint einfügen.

                      Gruß
                      Ingo
                      Ingo Webdesign

                      Kommentar


                      • #12
                        So viel manuelle Bastelei (u.U. mehrmals am Tag) möchte ich der Kollegin nicht zumuten. Es muss wegen der Hektik im Schulalltag schnell gehen und nach Möglichkeit muss sich möglichst viel an technischen Prozeduren automatisieren lassen.
                        Die Kollegin soll nur das Stundenplanprogramm bedienen und den Export machen (an Stelle des Ausdrucks). Wie gesagt: ich muss mir das Programm nochmal angucken, ob dort neben PDF nicht doch HTML angeboten wird und wie das Ganze dann aussieht.

                        Und dann habe ich euch so verstanden, dass man mit JavaScript eine solche HTML-Datei in einer übergeordneten Webseite einbinden und automatisch durchscrollen lassen kann, was bei PDF nicht geht. Richtig?

                        Kommentar


                        • #13
                          Dein Posting #8 macht die Sache plausibel. Ich habe da etwas mit pdfjs aufgebaut:
                          http://webentwicklung.ulrichbangert.de/pdfjs-7.html
                          Zuletzt geändert von Sempervivum; 30.09.2018, 07:45.

                          Kommentar


                          • #14
                            Großartig! Das sieht genauso aus, wie ich mir das vorstelle! Auch das Hochrutschen der Seite beim Erreichen des Endes. Perfekt!
                            Zuletzt geändert von rudluc; 30.09.2018, 10:01.

                            Kommentar


                            • #15
                              Ja, das ist eine PDF-Datei, man erkennt es in Zeile 21:
                              Code:
                              pdfjsLib.getDocument('testmultipage-2.pdf').then(function (pdf) {

                              Kommentar

                              homepage-forum.de - Hilfe für Webmaster! Statistiken

                              Einklappen

                              Themen: 56.413   Beiträge: 428.240   Mitglieder: 27.798   Aktive Mitglieder: 69
                              Willkommen an unser neuestes Mitglied, planaigeist.

                              Online-Benutzer

                              Einklappen

                              194 Benutzer sind jetzt online. Registrierte Benutzer: 3, Gäste: 191.

                              Mit 1.625 Benutzern waren am 17.03.2018 um 18:52 die meisten Benutzer gleichzeitig online.

                              Die neuesten Themen

                              Einklappen

                              • arnego2
                                Antwort auf Suche Filehoster
                                mega und hidive Mega (nz) komplett umsonst bis 5gb glaub ich....
                                Heute, 13:42
                              • andi656
                                Suche Filehoster
                                hallo,

                                welche Anbieter gibt es momentan die günstig oder sogar kostenlos ihren Dienst anbieten?
                                Ich bin da noch etwas ratlos, da ich sowas noch nie genutzt habe und bin daher über jeden Ratschlag dankbar....
                                Heute, 10:34
                              • Sempervivum
                                Antwort auf Zusätzliche fusszeile
                                Wenn Du also beide Boxen, #footer und #bereich, untereinander anzeigen willst, brauchst Du sie ja nur nacheinander in deine HTML-Seite einzufügen. Durch
                                Code:
                                display: flex;
                                flex-direction: column;
                                werden sie dann untereinander angeordnet. Woran scheiterst Du dabei denn?
                                BTW: float_center...
                                Gestern, 22:08
                              • föni
                                Antwort auf Zusätzliche fusszeile
                                Um die Codes auseinander zu halten, hab ich diese einfach anders benannt.

                                den...
                                HTML-Code:
                                #footer {
                                    width: 95%;
                                ...hab ich ja bereits mit eingepackt. Es erschein aber nicht mal einen Rahmen oder sonst was... als wäre der Code nicht da...

                                Weiss da auch nicht mehr w...
                                Gestern, 21:01
                              • Sempervivum
                                Antwort auf Zusätzliche fusszeile
                                Wenn Du den Footer über (fast) die ganze Breite haben willst, sieht dies doch vernünftig aus:
                                Code:
                                #footer {  
                                 width: 95%;
                                Ich bin nur ein wenig verwirrt, weil Du zunächst vom Footer schreibst und dann von #bereich? Soll diese Box zusätzlich zum Footer angezeigt werden?
                                Gestern, 19:39

                              Kostenlose Homepage bei Jimdo!

                              Einklappen

                              Jimdo

                              Die neuesten Beiträge

                              Einklappen

                              • andi656
                                Suche Filehoster
                                hallo,

                                welche Anbieter gibt es momentan die günstig oder sogar kostenlos ihren Dienst anbieten?
                                Ich bin da noch etwas ratlos, da ich sowas noch nie genutzt habe und bin daher über jeden Ratschlag dankbar....
                                Heute, 10:34
                              • arnego2
                                Antwort auf Suche Filehoster
                                mega und hidive Mega (nz) komplett umsonst bis 5gb glaub ich....
                                Heute, 13:42
                              • föni
                                Zusätzliche fusszeile
                                Hallo Leute

                                Ich hab eine html Seite am laufen mit folgendem Code:

                                HTML-Code:
                                 <!DOCTYPE HTML>
                                <html lang="de">
                                <head>
                                    <link rel="icon" href="bim/favicon.ico" type="image/x-icon" />
                                <title>x.ch</title>
                                ...
                                17.05.2019, 22:00
                              • Sempervivum
                                Antwort auf Zusätzliche fusszeile
                                Wenn Du also beide Boxen, #footer und #bereich, untereinander anzeigen willst, brauchst Du sie ja nur nacheinander in deine HTML-Seite einzufügen. Durch
                                Code:
                                display: flex;
                                flex-direction: column;
                                werden sie dann untereinander angeordnet. Woran scheiterst Du dabei denn?
                                BTW: float_center...
                                Gestern, 22:08
                              • föni
                                Antwort auf Zusätzliche fusszeile
                                Um die Codes auseinander zu halten, hab ich diese einfach anders benannt.

                                den...
                                HTML-Code:
                                #footer {
                                    width: 95%;
                                ...hab ich ja bereits mit eingepackt. Es erschein aber nicht mal einen Rahmen oder sonst was... als wäre der Code nicht da...

                                Weiss da auch nicht mehr w...
                                Gestern, 21:01
                              • Sempervivum
                                Antwort auf Zusätzliche fusszeile
                                Wenn Du den Footer über (fast) die ganze Breite haben willst, sieht dies doch vernünftig aus:
                                Code:
                                #footer {  
                                 width: 95%;
                                Ich bin nur ein wenig verwirrt, weil Du zunächst vom Footer schreibst und dann von #bereich? Soll diese Box zusätzlich zum Footer angezeigt werden?
                                Gestern, 19:39
                              • föni
                                Antwort auf Zusätzliche fusszeile
                                Vielen Dank für Deine hilfreiche Antwort.

                                Ich hab nun den Code wie folgt ergänzt und möchte eigentlich unten gerne auch die selbe box quer (ca. 95% breit) über die Seite haben. (wie im Bild oben)

                                HTML-Code:
                                #footer {
                                width: 95%;
                                min-height: 560px;
                                margin: 0 auto;
                                ...
                                Gestern, 19:07
                              • Sempervivum
                                Antwort auf Zusätzliche fusszeile
                                Dann versuche es mit...
                                Gestern, 07:27
                              • föni
                                Antwort auf Zusätzliche fusszeile
                                Die Fusszeile sollte normal in die Seite eingebaut werden und nicht immer fix zu sehen sein....
                                Gestern, 07:13
                              • Sempervivum
                                Antwort auf Zusätzliche fusszeile
                                Soll die Fußzeile denn ganz normal in die Seite eingebettet sein oder soll sie beim Scrollen fixiert sein? In jedem Fall ist float:left der falsche Weg. Wenn ersteres zutrifft, ist es wahrscheinlich schon ausreichend, wenn Du es weglässt und beim body flex-direction:column und align-items:center hinzu...
                                Gestern, 06:27
                              Lädt...
                              X