Bestimmte Texte ausdrucken?

Webhufi

Erfahrenes 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
 
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:
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
 
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.
 
Hab ich gemacht... "Drucke dies" bleibt ohne jegliche Funktion, ist immer nur noch ein Text... *schluchz*...
Soll ich's aufgeben?
 
... 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.
 
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
 
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.
 
Zurück