Bestimmte Texte ausdrucken?


Webhufi

Mitglied
Hallo,

ich habe auf dieser Seite in den "Balken" Texte drin, die beim Klick geöffnet werden.

Gibt es eine Möglichkeit, dem Besucher den Ausdruck oder die Speicherung eines solchen Textes anzubieten? Mit einem normalen Rechtsklick kann ja nur die komplette Seite erfasst werden.

Hinweis: Ich benutze ein CMS, habe aber Zugriff in CSS und HTML.

Danke und viele Grüße

Norbert
 

Sempervivum

Erfahrenes Mitglied
Für das Drucken habe ich mal einen groben Entwurf gemacht, der auf meiner Testseite funktioniert:
Code:
    <div class="tab" id="printcontainer"></div>
    <style>
        @media print {
            body>:not(#printcontainer) {
                display: none;
            }
        }
    </style>
    <div class="tab">
        <input id="tab-1" type="checkbox" name="tabs">&nbsp;
        <span class="printbtn">Drucke dies</span>
        <label for="tab-1">Frisch oder als
            Pesto
        </label>
        <div class="tab-content">Die frischen Blätter finden überall da Verwendung, wo auch Schnittlauch und Knoblauch
            passen!&nbsp;Also im grünen Salat, mit Quark vermischt, vorsichtig dosiert aufs Butterbrot und vieles
            mehr.<br><br>Keine Angst wegen möglicher Ausdünstungen nach dem Genuss frischen Bärlauchs: Die Inhaltsstoffe
            ähneln zwar dem Knoblauch, aber sie sind so gering, dass sie sich nicht über die Haut verflüchtigen; der
            Atem
            riecht allerdings schon etwas, aber nur kurz nach dem Genuss.<br><br>Mein Rezept für
            Pesto&nbsp;<br><br>Blätter
            ohne Stiele werden bis zum Beginn der Blütezeit gesammelt, wobei auch die noch geschlossenen oder sich
            gerade
            öffnenden Knospen mit eingepackt werden sollten.&nbsp;<br>Die ganz jungen Blätter zu Beginn der
            Wachstumszeit
            haben einen wesentlich intensiveren Geschmack, dennoch sind auch reife Blätter immer noch ein herrlicher
            Genuss,
            selbst zur vollen Blütezeit!<br><br>Für ein kleines Marmeladenglas sind etwa sechs handvoll Blätter
            notwendig;
            lieber etwas mehr rechnen, da die Blätter im Glas stark schrumpfen.<br><br>Die klein gehackten Blätter
            werden
            (evtl. mit Blütenknospen, auch sich gerade öfnenden) in dickeren Schichten ins Glas gelegt, wobei auf jede
            Schicht ein gestrichener Teelöffel Salz gestreut wird. Keine Angst wegen dem vielen Salz: Es ist notwenig,
            um
            die Haltbarkeit zu gewährleisten, wird aber von der Intensität her weitgehend vom Bärlauch neutralisiert;
            ein
            Pesto mit zuwenig Salz schmeckt furchtbar!<br><br>Wer will, gibt noch Pinienkerne nach Gefühl hinzu; meiner
            Meinung nach ist das aber Geldverschwendung, da der Geschmack dadurch nicht wesentlich gesteigert oder
            verändert
            wird; alternativ sind grob oder fein gemahlene Walnüsse denkbar, aber diese Variationen sollten sie erst
            ausprobieren, nachdem Sie ein pures Pesto genossen haben!<br><br>Lassen Sie das Glas eine Weile stehen,
            damit
            sich die Mischung setzen kann; es sollte unter dem Glasrand etwa 0,5 cm frei bleiben; gerne können Sie nach
            etwa
            zehn Minuten auch mit einem Löffel&nbsp;nachhelfen, um die Masse ins Glas zu drücken.<br><br>Das freie
            Volumen
            wird&nbsp;mit relativ wenig Öl Ihrer Wahl aufgefüllt: geschmacksintensives Öl wie z.B. viele Olivenöle
            verändern
            natürlich den reinen Bärlauchgeschmack, sollten aber bei verschiedenen Gläsern ausprobiert werden! So
            entstehen
            herrliche Variationen. Auch ein wenig mehr an Öl dürfen Sie gerne testen!<br><br>Setzen Sie den Deckel auf
            das
            Glas und stellen Sie es für eine halbe Stunde auf den Kopf und danach aufrecht in den Kühlschrank. Während
            einer
            Woche etwa dreimal drehen, dann ist das Pesto reif zum Genießen!<br><br>Entgegen langläufiger Meinung ist
            auch
            mein geöffnetes Pesto bis zur nächsten Saison absolut gesund, wenn man beim Entnehmen immer&nbsp;frisches
            Besteck verwendet. Wenn Sie aber auf den Geschmack gekommen sind, ist eine solche Haltbarkeitsdauer aus eben
            diesem Grund überhaupt nicht denkbar...<br><br>Geschlossene Gläser bleiben im Kühlschrank über drei Jahre
            kerngesund!</div>
        <div class="tab-content">&nbsp;</div>
        <div class="tab-content"><u>Nutzen für die Gesundheit:</u> appetitanregend</div>
    </div>
    <script>
        var printbtns = document.querySelectorAll("span.printbtn");
        var vprintcontainer = document.getElementById("printcontainer");
        for (var i = 0; i < printbtns.length; i++) {
            printbtns[i].addEventListener("click", function () {
                var container = this.parentNode;
                vprintcontainer.innerHTML = container.innerHTML;
                window.print();
                vprintcontainer.innerHTML = "";
            });
        }
    </script>
  • Den #printcontainer nur einmal auf der Seite
  • Das CSS ebenfalls nur einmal auf der Seite, im Head
  • Das Javascript ebenfalls nur einmal auf der Seite, am Ende des Body
  • Das span.printbtn muss in jedem Tab eingefügt werden, genau dort, wo es jetzt steht. Sollte das schwierig sein, kann man es auch mit Javascript automatisch einfügen.
Einschränkung:
  • Direct im Body dürfen keine Texte stehen, nur in Containern. Wenn ich es richtig sehe, ist das auf deiner Seite der Fall
Offene Punkte:
  • .printbtn gestalten und im Druck unterdrücken
  • Überschrift und Bilder hinzu fügen
 
Zuletzt bearbeitet:

Webhufi

Mitglied
Ich komme nicht klar damit; ich kann nur über 'Widgets' Codes eingeben. Möglicherweise sind die an der falschen Stelle gelandet? Jedenfalls kann ich den Print nicht aktivieren!

Im Widget 'Quelltext' sind folgende Codes für die gesamte Seite gültig:

<div class="tab" id="printcontainer"></div>
<style>
@media print {
body>:not(#printcontainer) {
display: none;
}
}
</style>

<script>
var printbtns = document.querySelectorAll("span.printbtn");
var vprintcontainer = document.getElementById("printcontainer");
for (var i = 0; i < printbtns.length; i++) {
printbtns.addEventListener("click", function () {
var container = this.parentNode;
vprintcontainer.innerHTML = container.innerHTML;
window.print();
vprintcontainer.innerHTML = "";
});
}
</script>

Das span.printbtn kann ich problemlos in jeden Tab einfügen; im Beispiel ist es drin.

S. nochmal hier
 

Sempervivum

Erfahrenes Mitglied
Alles klar, das Javascript steht vor der Definition des Printbuttons. Macht nichts, verwende dieses und es sollte funktionieren:
Code:
    <script>
        document.addEventListener("DOMContentLoaded", function (event) {
            var printbtns = document.querySelectorAll("span.printbtn");
            var vprintcontainer = document.getElementById("printcontainer");
            for (var i = 0; i < printbtns.length; i++) {
                printbtns[i].addEventListener("click", function () {
                    var container = this.parentNode;
                    vprintcontainer.innerHTML = container.innerHTML;
                    window.print();
                    vprintcontainer.innerHTML = "";
                });
            }
        });
    </script>
D. h. das alte durch dieses ersetzen.
 

Webhufi

Mitglied
Hab ich gemacht... "Drucke dies" bleibt ohne jegliche Funktion, ist immer nur noch ein Text... *schluchz*...
Soll ich's aufgeben?
 

Sempervivum

Erfahrenes Mitglied
... schon einen Schritt weiter. Was jetzt noch fehlt:

#printcontainer muss ein direktes Kindelement von body sein, im Moment liegt es ganz tief im Baum. Vielleicht kannst Du das Widget ganz oben auf der Seite anordnen, vor allen anderen Elementen?

Es fehlt noch dieses CSS:
Code:
#printcontainer .tab-content {
    max-height: unset;
}
um den Text sichtbar zu machen.
 

Webhufi

Mitglied
Ich habe alle Möglichkeiten ausgelotet, die das CMS bietet. Natürlich sollte ein User nicht in die Tiefen eingreifen können, deswegen gibt es Widgets wie "Quelltext" oder "Mobile-Script". Ich kann aber nicht herausfinden, wo diese Codes platziert werden; die Baumstruktur ist mir nicht zugänglich: also keine direkte Platzierung z.B. im Body.
Verschiedene Möglichkeiten habe ich getestet, auch dein zusätzliches CSS eingefügt: es bleibt so, wie es war... *schonwiederschluchz

Inzwischen kamen auch Anfragen, was der Text "Drucke dies" bewirken soll...

Neuen Versuch habe ich hochgeladen.

Gruß vom verzwutzelten Norbert
 

Sempervivum

Erfahrenes Mitglied
Das ist ja schon mal eine gute Nachricht: Bei mir öffnet sich der Druckdialog, nur leider ist das Fenster leer.
Das liegt daran, dass der #printcontainer irgendwo tief im Baum liegt. Ist aber kein Problem, wir fügen ihn einfach mit Javascript ein:
Code:
    <script>
        document.addEventListener("DOMContentLoaded", function (event) {
            var printbtns = document.querySelectorAll("span.printbtn");
            for (var i = 0; i < printbtns.length; i++) {
                printbtns[i].addEventListener("click", function () {
                    var container = this.parentNode;
                    vprintcontainer.innerHTML = container.innerHTML;
                    window.print();
                    vprintcontainer.innerHTML = "";
                });
            }
            var vprintcontainer = document.createElement("div");
            vprintcontainer.id = "printcontainer";
            document.querySelector("body").appendChild(vprintcontainer);
        });
    </script>
Auf meiner Testseite getestet und funktioniert.
Das div#printcontainer ist jetzt im HTML überflüssig, Du kannst es dann wieder heraus nehmen.
 

Webhufi

Mitglied
Ja, der Druckdialog öffnet sich; aber nur mit dem 'Drucke dies' und der Überschrift im tab.
Den Code aus #7 habe ich wohl an falscher Stelle drinne?
 

Sempervivum

Erfahrenes Mitglied
Der Fehler besteht darin, dass Du das CSS aus #7 in script-Tags gesetzt hast:
Code:
<script>
#printcontainer .tab-content {
    max-height: unset;
}
</script>
es müssen jedoch style-Tags sein:
Code:
<style>
#printcontainer .tab-content {
    max-height: unset;
}
</style>
Wenn ich das in den Entwicklerwerkzeugen ändere, funktioniert es auf deiner Seite, der ganze Text wird in der Druckvorschau angezeigt.
Normaler Weise gehört das CSS in den Head und ist auch nur dann valide, aber die Browser sehen das i. allg. nicht so eng.
 

Webhufi

Mitglied
Yesss! Juchhu! Du bist eine Wucht... ;-) Ich freue mich so!

Jetzt fehlt wegen der Schönheit nur noch, dass man den Text "Drucke dies" irgendwie aktiviert; bei diesem Text kommt ja keiner auf die Idee, darauf zu klicken...
 

Sempervivum

Erfahrenes Mitglied
Du kannst es ja mit einem Button versuchen:
Code:
<button class="printbtn">Drucke dies</button>
Oder mit einem geeigneten Icon.
 

Sempervivum

Erfahrenes Mitglied
PS: Dann muss allerdings auch das Javascript angepasst werden:
Code:
    <script>
        document.addEventListener("DOMContentLoaded", function (event) {
            var printbtns = document.querySelectorAll("button.printbtn");
            for (var i = 0; i < printbtns.length; i++) {
                printbtns[i].addEventListener("click", function () {
                    var container = this.parentNode;
                    vprintcontainer.innerHTML = container.innerHTML;
                    window.print();
                    vprintcontainer.innerHTML = "";
                });
            }
            var vprintcontainer = document.createElement("div");
            vprintcontainer.id = "printcontainer";
            document.querySelector("body").appendChild(vprintcontainer);
        });
    </script>
 

Webhufi

Mitglied
Klasse! Ein png wäre zwar hübscher, aber so ist es auch gut. Ich weiß nämlich nicht, wie ich das png einbinden kann..
Ich habe die Position etwas verändert, da sonst das + im Label verschwindet.

Vielen Dank für Alles und viele Grüße!
Norbert
 
Zuletzt bearbeitet:

Webhufi

Mitglied
Letzte Bitte: Mir würde es sehr gefallen, ein 'drucken.png' zu benutzen.
Würdest du mir bitte noch erklären, wie ich diesem Icon den Druckbefehl beibringen kann? Also statt den <button> zu verwenden?
 

Sempervivum

Erfahrenes Mitglied
Kein Problem: Ersetze das button- durch ein img-Tag, d. h. dieses:
Code:
<button class="printbtn">Drucke dies</button>
durch dieses:
Code:
<img class="printbtn" src="drucken.png">
und berücksichtige es im Javascript:
Code:
    <script>
        document.addEventListener("DOMContentLoaded", function (event) {
            var printbtns = document.querySelectorAll("img.printbtn");
            for (var i = 0; i < printbtns.length; i++) {
                printbtns[i].addEventListener("click", function () {
                    var container = this.parentNode;
                    vprintcontainer.innerHTML = container.innerHTML;
                    window.print();
                    vprintcontainer.innerHTML = "";
                });
            }
            var vprintcontainer = document.createElement("div");
            vprintcontainer.id = "printcontainer";
            document.querySelector("body").appendChild(vprintcontainer);
        });
    </script>
 

Webhufi

Mitglied
Auch wenn ich unverschämt erscheine: aber ich möchte es perfekt machen!
Der veränderte Mauszeiger fehlt; der User sieht nicht, dass hier etwas zum Anklicken ist.
 

Sempervivum

Erfahrenes Mitglied
Nein, ist nicht unverschämt, das fehlt wirklich und es ist nur eine Kleinigkeit. Füge dies CSS zu dem anderen hinzu:
Code:
.printbtn {
    cursor: pointer;
}
Was IMO auch noch fehlt, ist die Überschrift, "Bärlauch" bei dem ersten und "Beifuß" bei dem zweiten Text.
 

Neue Beiträge