Hannes Weninger: Ausdrucken einer Liste im Browser mit scroll- Balken

Hallo,

ich hab in meiner Applikation ein Modal, in dem eine mehr oder weniger lange Liste (table) dargestellt wird. Diese Liste reicht bei weitem über die Browserhöhe hinaus. Diese Liste soll mittels dieses Buttons ausgedruckt werden:

Öffnen des Modals:

<button type="button" data-ng-click="vm.showAccountOverviewPrintPreviewModal()">Druckvorschau</button>

und im Modal ist dann dieser Button:

<button onClick="javascript:window.print()" type="button" class="btn btn-default printButton">Ausdrucken</button>

Mein Problem ist, dass nur der Teil der Liste ausgedruckt wird, der auch sichtbar ist, der andere Teil wird nicht ausgedruckt. Weiß jemand wie ich dem Browser sagen soll, dass er den ganzen Dialog mit der ganzen Liste ausdrucken soll.

Danke! Hannes

  1. Hi,

    <button onClick="javascript:window.print()" type="button" class="btn btn-default printButton">Ausdrucken</button>
    

    zwei formale Anmerkungen hierzu: a) Es ist üblich, Attributnamen durchgehend klein zu schreiben, also onclick und nicht onClick. Und b) ist das Label javascript: im Javascript-Code sinnlos und daher überflüssig.
    Genaugenommen ist der ganze Button überflüssig, denn den haben die meisten Browser sowieso schon.

    Mein Problem ist, dass nur der Teil der Liste ausgedruckt wird, der auch sichtbar ist, der andere Teil wird nicht ausgedruckt.

    Das bedeutet, du hast die Höhe irgendeines Elements beschränkt, was für die Bildschirmdarstellung vielleicht vernünftig sein mag.

    Weiß jemand wie ich dem Browser sagen soll, dass er den ganzen Dialog mit der ganzen Liste ausdrucken soll.

    Hebe die Höhenbeschränkung im Print-Stylesheet auf bzw. setze sie nur im Screen-Stylesheet.

    So long,
     Martin

    --
    Es gibt eine Theorie, die besagt, dass das Universum augenblicklich durch etwas noch Komplizierteres und Verrücktes ersetzt wird, sobald jemand herausfindet, wie es wirklich funktioniert. Es gibt eine weitere Theorie, derzufolge das bereits geschehen ist.
    - (frei übersetzt nach Douglas Adams)
    1. Hallo Martin,

      danke für die Antwort. Ich hab jetzt versucht die Höhe zu setzen aber leider ohne Erfolg, Das einzige was sich ändert ist der Scrollbalken:

      Bildbeschreibung

      Der Scrollbalken wird nur angezeigt im Modal, man kann aber nicht scrollen. Auch der Browser Scrollbalken kann nicht gescrollt werden. Meiner Meinung nach müßte der Browser ja z.B. 2 Seiten drucken, wenn der Browser den Content mit einem Scrollbalken darstellt? Mir ist jetzt nicht ganz klar wie ich dem Browser beibringen kann, dass er die ganze Liste druckt,

      PS: Der Druckbutton ist notwendig um das Drucken zu vereinfachen.

      Danke! Hannes

      1. Hallo,

        Ich hab jetzt versucht die Höhe zu setzen aber leider ohne Erfolg

        welchen Wert hast du denn gesetzt? Das einzig Sinnvolle wäre ja wahrscheinlich der Initialwert auto. Alles andere würde die Höhe ja doch wieder auf irgendwas fixieren und begrenzen.

        Bildbeschreibung

        Toll. Ein Screenshot. Das sagt ungefähr so viel wie ein Foto von der letzten Party.
        Viel sinnvoller und informativer wären relevante Code-Ausschnitte. Oder ein Online-Beispiel (gern auch auf das Wesentliche reduziert). Du hast doch schon oft genug hier um Rat gefragt, um das zu wissen.

        Der Scrollbalken wird nur angezeigt im Modal, man kann aber nicht scrollen. Auch der Browser Scrollbalken kann nicht gescrollt werden.

        Hä? In deinem Screenshot (vermutlich die Druckvorschau) sehe ich nur einen Scrollbalken.

        Meiner Meinung nach müßte der Browser ja z.B. 2 Seiten drucken, wenn der Browser den Content mit einem Scrollbalken darstellt?

        Ja. Oder noch mehr. Aber nur dann, wenn body oder html durch den Inhalt so groß werden, dass sie Scrollbalken bekommen. Elemente innerhalb der Seite, die durch eine fixe Höhe und overflow:auto oder overflow:scroll einen Scrollbalken bekommen, sind beim Ausdruck ebenfalls beschnitten.

        PS: Der Druckbutton ist notwendig um das Drucken zu vereinfachen.

        Ich sehe nicht, was der vereinfachen sollte, aber wenn du meinst ...

        So long,
         Martin

        --
        Es gibt eine Theorie, die besagt, dass das Universum augenblicklich durch etwas noch Komplizierteres und Verrücktes ersetzt wird, sobald jemand herausfindet, wie es wirklich funktioniert. Es gibt eine weitere Theorie, derzufolge das bereits geschehen ist.
        - (frei übersetzt nach Douglas Adams)
        1. Hallo Martin,

          ich hab jetzt das nachgebaut, an dem ich kläglich zu scheitern drohe. Hier ist der Link:

          Mein Problem

          Wenn man auf gen Button "Drucktest" klickt, dann geht ein Modal auf mit vielen Einträgen, es werden aber nur die sichtbaren Einträge gedruckt. Ich wär dir sehr dankbar wenn du mir dabei nochmal helfen kannst.

          Danke! Hannes

          1. Moin,

            ich hab jetzt das nachgebaut, an dem ich kläglich zu scheitern drohe.
            Hier ist der Link:

            Mein Problem

            weißer Adler auf weißem Grund. Mit anderen Worten: Eine leere Seite.

            Ein Blick in den Quelltext offenbart Heerscharen von Javascripts, die eingebunden werden, aber keinen Inhalt. Nein, so bin ich nicht dabei. Ich schrieb bewusst "ein auf das Wesentliche reduziertes Beispiel". Also etwas statisches HTML und das zugehörige Stylesheet.

            Ich wär dir sehr dankbar wenn du mir dabei nochmal helfen kannst.

            Aber nicht auf dieser Grundlage, sorry.

            So long,
             Martin

            --
            Es gibt eine Theorie, die besagt, dass das Universum augenblicklich durch etwas noch Komplizierteres und Verrücktes ersetzt wird, sobald jemand herausfindet, wie es wirklich funktioniert. Es gibt eine weitere Theorie, derzufolge das bereits geschehen ist.
            - (frei übersetzt nach Douglas Adams)
            1. ok, dann wird der content oder die url von deiner Firewall gefiltert. hmmm, ich kann leider nur auf diesem Port hosten, sch...

              1. Hi,

                ok, dann wird der content oder die url von deiner Firewall gefiltert.

                nein, es gibt keinen Inhalt - nur Javascript. Nach geschätzten 50 oder mehr Javascript-Einbindungen endet das Dokument mit

                <body data-ng-app="accounting" data-ng-include="'app/core/accounting.html'">
                </body>
                

                Das hat mit irgendwelchen Filtern oder Firewalls sicher nichts zu tun, sondern höchstens damit, dass ich von unbekannten Quellen generell kein Javascript ausführen lasse.

                So long,
                 Martin

                --
                Es gibt eine Theorie, die besagt, dass das Universum augenblicklich durch etwas noch Komplizierteres und Verrücktes ersetzt wird, sobald jemand herausfindet, wie es wirklich funktioniert. Es gibt eine weitere Theorie, derzufolge das bereits geschehen ist.
                - (frei übersetzt nach Douglas Adams)
            2. So, hier das jsFiddle:

              Mein Problem Ich möchte die ganze Liste ausdrucken, aber es wird nur der sichtbare Bereich ausgedruckt.

              Vl. kann mir ja noch jemand weiter helfen.

              Danke! Hannes