• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Frage textarea zeilenumbruch im pdf mit java ?

ah, habs mir heute morgen gleich nochmal angeschaut und getestet. du hast recht, die schleife berücksichtigt alle textareas im formular. klappt perfekt!
so sieht es gut aus - musste es auch gleich noch in mein "großes" formular einbauen und es funktioniert auch!!! toll, vielen dank - hätte ich allein nicht hingekriegt - ich muss wohl doch mal tiefer in java einsteigen, um sowas lösen zu können

vielen dank und schöne woche
 
Werbung:
zu früh gefreut - habs immer im chrome und firefox benutzt und musste jetzt feststellen das der edge das textfeld im pdf leer lässt: wieso??? muss man da etwas beachten?
 
Hm, kann ich nicht nachvollziehen, auch im Edge ist bei mir das Textfeld gefüllt, siehe Anhang. Tritt der Fehler vielleicht nur in deinem erweiterten Umfeld mit mehreren Textfeldern auf? Beschreibe mal genau, wie Du vorgegangen bist.
 

Anhänge

  • generated3.pdf
    36,3 KB · Aufrufe: 1
Werbung:
ich hab den code in mein formular gebracht mit edge geöffnet und dann sieht es so aus:
vor.pngdanach.png

bin heute erstmal unterwegs, mal sehen ob ich es morgen schaffe - melde mich wieder
 
kurz vorm ziel spielt der edge nicht mit: also ich habe deinen code in mein formular gepackt und der edge lässt das textfeld im pdf leer. alle anderen browser funktionieren

HTML: 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Formular</title>
    <style>

        .table-container {
            margin-top: 20px;                         
            margin-left: 120px;
            margin-right: 100px;
        }
        table {
               border-collapse: collapse;
               border: none;
        }
        th, td {
            border: 1px solid;                             
            padding: 4px;
            text-align: left;
            vertical-align: middle;
        }
        tr {
            vertical-align: middle;
        }
        .normaltext {
            text-align: left;
            font-size: 18px;
            color: black;
            font-weight: normal;
            padding-top: 10px;
        }
        .normaltext_fett {
            color: black;
            text-align: left;
            font-size: 18px;
            font-weight: bold;
            padding-top: 10px;
        }
        .textklein {
            color: black;
            font-size: 12px;
        }
        .no-border {
            border: 1px solid;
            background-color: #F5F6CE;
        }
        .input-color {
            color: black;
        }
        .button {
            background-color: green;
            border-color: white;
            color: white;
            font-size: 16px;
        }
        select {
            border: 1px solid;
            outline: none;
            background-color: #F5F6CE;
            width: 200px;
            padding-top: 10px;
        }
        
        #textarea {
            white-space: pre-wrap; /* Dies erzwingt die Anzeige der Zeilenumbrüche */
        }
        
        /* Während das PDF erzeugt wird, verbergen wir die Textarea: */
        main.creating-pdf textarea {
            display: none;
        }

        /* Das Helfer-Div im Aussehen an die Textarea anpassen: */
        main .for-pdf {
            border: 1px solid lightgray;
            word-wrap: break-word;
        }

        /* Wird kein PDF erzeugt, verbergen wir das Helfer-Div: */
        main:not(.creating-pdf) .for-pdf {
            display: none;
        }
            
    </style>
</head>


<body>
    <form id="Formular">
    <main>
    <div class="table-container">

        <table>
            <tr>
                <td colspan="11" class="normaltext_fett">Genehmigung:</td>
            </tr>
            
    
            <tr id="Genehmigungsdatum_id_date">
                <td style="text-align:center">
                    <input type="radio" id="radio_Auflagen" name="Auflagen" onclick="pruefen_auflagen()">
                    <label>  </label>
                </td>
                <td><input class="normaltext no-border" type="date" name="Genehmigungsdatum_date" id="Genehmigungsdatum_date" ></td>
            </tr>
            <tr id="Genehmigungsdatum_id_text" style="display: none;">
                <td colspan="2"></td>
                <td><input class="normaltext no-border" type="text" name="Genehmigungsdatum_text" id="Genehmigungsdatum_text"></td>
            </tr>           
            <tr>
                <td class="normaltext" >Text:</td>
                <td class="normaltext" style="text-align:right">1.</td>
                <td id="td_1_firma" > <input class="normaltext no-border" type="text" name="Firma1" id="firma1" placeholder="" size="50"></td>
            </tr>           



            <tr>
                <td style="text-align:center">
                    <input type="radio" id="radio_Auflagen2" name="Auflagen" onclick="pruefen_auflagen()" value="Auflagen2">
                    <label>  </label>
                </td>
                <td colspan="9" class="normaltext">entsprechend den Auflagen / Anmerkungen in beiligender Genehmigung</td>
            </tr>

            <tr>
                <td></td>
                <td colspan="9" height="80px">
                    <textarea name="Auflagen2" id="textarea" class="normaltext" cols="100" rows="4" placeholder="" onclick="activate_radio_auflagen()" oninput="updateTextarea()"></textarea>
                </td>
            </tr>

            
            
            <tr>               
                <td colspan="2" class="normaltext_fett">Auswahl:</td>
                <td colspan="9"  >
                    <select class="normaltext no-border" id="auswahl">
                        <option value="">bitte wählen</option>
                        <option value="aa">Auswahl A</option>
                        <option value="bb">Auswahl B</option>
                    </select>
                    <span style="color:white" id="ergebnis"></span>
                </td>
            </tr>

            
            <tr>
                <td colspan="11">
                    <div id="element-to-hide" data-html2canvas-ignore="true">
                        <button class="button"   type="reset" >Formular leeren</button>
                        <button class="button"   type="submit" id="generatePdf">Formular als PDF drucken</button>
                    </div>
                </td>
            </tr>
        </table>
        
        
    </div>
</main>   
</form>   
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script>
    <script src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>

    <script>
    
        window.onload = function () {
            pruefen_auflagen();
        };

        function pruefen_auflagen() {
            if (document.getElementById('radio_Auflagen').checked) {
                document.getElementById('textarea').value = "";
                document.getElementById('textarea').parentNode.parentNode.style.display = 'none'; // Hier wird die ganze Zeile ausgeblendet
            } else {
                document.getElementById('textarea').parentNode.parentNode.style.display = ''; // Hier wird die Anzeige der Zeile wiederhergestellt, falls nicht ausgewählt
            }
        }

            const
            // Das Element, das gedruckt werden soll, bereit stellen:
            elementToPrint = document.querySelector('main'),
            // Die Textareas bereit stellen:
            textareas = elementToPrint.querySelectorAll('main textarea');
            // Für alle Textareas:
            textareas.forEach(textarea => {
            // Helfer-Div dahinter einfügen und seine Breite
            // gleich der der Textarea setzen:
            const
                box = textarea.getBoundingClientRect();
                textarea.insertAdjacentHTML('afterend',
                `<div class="for-pdf" style="width: ${box.width}px"></div>`);
            });



        window.jsPDF = window.jspdf.jsPDF;
        document.getElementById('generatePdf').addEventListener('click', function (event) {
            event.preventDefault();

            // Bei dem Element, das gedruckt werden soll,
            // die Klasse "creating-pdf" hinzu fügen.
            // Davon abhängig wird die Sichtbarkeit der Textarea
            // und des Helfer-Divs im CSS gesteuert:
            elementToPrint.classList.add('creating-pdf');
            // Für alle Textareas:
            textareas.forEach(textarea => {
                // Den Text in das Helfer-Div dahinter eintragen:
                const
                    txt = textarea.value,
                    nextEle = textarea.nextElementSibling;
                nextEle.textContent = txt;
            });


            document.getElementById('element-to-hide').style.display = 'none';

            // Genehmigungsdatum
            if (document.getElementById('Genehmigungsdatum_date').value !== '') {
                document.getElementById('Genehmigungsdatum_id_date').style.display = 'none';
                document.getElementById('Genehmigungsdatum_id_text').removeAttribute('style');
                var genehmigungsdatum = document.getElementById('Genehmigungsdatum_date').value.split('-');
                document.getElementById('Genehmigungsdatum_text').value = genehmigungsdatum[2] + '.' + genehmigungsdatum[1] + '.' + genehmigungsdatum[0];
            }

            const pdf = new jsPDF();

             pdf.html(document.querySelector('main'), {
                html2canvas: {
                    scale: 0.16
                 },
                
                callback: function (pdf) {
                    document.getElementById('element-to-hide').style.display = 'block';

                    // Rücksetzen der Stile für Datumsfelder
                    document.getElementById('Genehmigungsdatum_id_text').style.display = 'none';
                    document.getElementById('Genehmigungsdatum_id_date').style = '';
                    
                    
                    // Bei dem Element, das gedruckt wurde,
                    // die Klasse "creating-pdf" wieder löschen:
                    elementToPrint.classList.remove('creating-pdf');

                    pdf.save();
                }
            });
        });
    </script>

</body>
</html>
 
Das gibt's nicht: Auch wenn ich diesen Code 1-zu-1 in eine Testdatei schreibe funktioniert es einwandfrei im Edge. Bleibt die Vermutung, dass bei dir irgend etwas in den Einstellungen des Edge anders ist oder dass uns eine Erweiterung in die Suppe spuckt.
 
Werbung:
Sempervivum schrieb:
Bleibt die Vermutung, dass bei dir irgend etwas in den Einstellungen des Edge anders ist oder dass uns eine Erweiterung in die Suppe spuckt.
Zum Vergrößern anklicken....
Genau das ist der Grund, warum ich PDF's mit PHP erzeuge und nicht mit JavaScript. Man weiß nie, was der Benutzer so alles mit seinem Browser angestellt hat.
 
ich bin echt überfragt??? welche einstellungen könnte denn sowas blockieren?

muss die css definition anders aussehen?
wenn es im css so wie unten aussieht, dann stehen im html formular alle beiden textareas, aber in der pdf nur das helferarea? irgendwas passt hier noch nicht

Code: 
        /* Während das PDF erzeugt wird, verbergen wir die Textarea: */
        main.creating-pdf textarea {
            display: none;
        }

        /* Das Helfer-Div im Aussehen an die Textarea anpassen: */
        main .for-pdf {
            border: 1px solid lightgray;
            word-wrap: break-word;
        }

        /* Wird kein PDF erzeugt, verbergen wir das Helfer-Div: */
        main:not(.creating-pdf) .for-pdf {
            display: '';
        }
 
ich bin echt überfragt??? welche einstellungen könnte denn sowas blockieren?
Zum Vergrößern anklicken....
Ich bin genau so überfragt. Ist denn dein Edge in einem "jungfräulichen" Zustand, d. h. so wie nach der Installation?

muss die css definition anders aussehen?
wenn es im css so wie unten aussieht, dann stehen im html formular alle beiden textareas, aber in der pdf nur das helferarea?
Zum Vergrößern anklicken....

IMO ist das CSS so wie ich es gepostet habe, korrekt. In deinem fehlt das "display: none;" ganz unten, deshalb ist auch das Helfer-Div immer sichtbar.
Ist der Code, den Du in #25 gepostet hast, denn vollständig oder immer noch gekürzt?

Genau das ist der Grund, warum ich PDF's mit PHP erzeuge und nicht mit JavaScript.
Zum Vergrößern anklicken....
Das hat was für sich, würde aber in diesem Fall die Abläufe komplizierter machen, weil man die Daten erst zum Server hoch laden und dann das PDF wieder herunter laden müsste.
 
Werbung:
nein, kann es leider nicht online schalten

der edge ist jungfräulich, wie du so schön sagst, ist nix verstellt

die lösung kann aber nicht so weit weg sein, denn wenn ich das helfer div auf sichtbar schalte, erscheint auch ein text im pdf - leider auch im formular
kann ich evtl noch einen befehl einbauen, dass nach erzeugen des pdf das helfer div ausgeschalten wird?
 
Werbung:
"ich untersuche das ..." sagt sich leicht aber leider kann ich das in meinem Edge ja nicht reproduzieren.

Also ein Schuss ins Dunkle: Versuche, die Reihenfolge so zu ändern:
Code: 
        // hier drüber alles wie zuvor
        window.jsPDF = window.jspdf.jsPDF;
        document.getElementById('generatePdf').addEventListener('click', function (event) {
            event.preventDefault();

            // Für alle Textareas:
            textareas.forEach(textarea => {
                // Den Text in das Helfer-Div dahinter eintragen:
                const
                    txt = textarea.value,
                    nextEle = textarea.nextElementSibling;
                nextEle.textContent = txt;
            });

            // Bei dem Element, das gedruckt werden soll,
            // die Klasse "creating-pdf" hinzu fügen.
            // Davon abhängig wird die Sichtbarkeit der Textarea
            // und des Helfer-Divs im CSS gesteuert:
            elementToPrint.classList.add('creating-pdf');

            document.getElementById('element-to-hide').style.display = 'none';
            // hier drunter alles wie zuvor
 
nein, das textfeld im pdf bleibt leer - hat nix gebracht
kann es sein, dass der edge nur das druckt, was er sieht? - in meinem jugendlichen leichtsinn gefragt?
 
Werbung:
kann es sein, dass der edge nur das druckt, was er sieht?
Zum Vergrößern anklicken....
Das ist eine sehr berechtigte Frage und die selbe Vermutung habe ich auch schon. Bloß kann ich keine Lösung ausarbeiten, wenn ich es nicht reproduzieren kann.

wie spreche ich denn das helfer div an, damit ich es nach dem erzeugen der pdf einfach ausschalte?
Zum Vergrößern anklicken....
Das geschieht alles über die Klasse "creating-pdf" und, wenn ich das richtig sehe, muss es ja auch vor dem Drucken unsichtbar sein, nicht wahr?

Woran scheitert den das Online-Stellen? Vertrauliche Daten? Oder liegt das in einem geschlossenen Netzwerk?
 
ja, vertrauliche daten und intranet

wenn ich das helfer div im css so lasse:

/* Wird kein PDF erzeugt, verbergen wir das Helfer-Div: */
main:not(.creating-pdf) .for-pdf {
display: '';
}

und das formular aufrufe: ist es nicht sichtbar, dann gebe ich die daten ein und es bleibt unsichtbar, dann gehe ich auf drucken und es wird sichtbar, sodass der user, der sein pdf aus dem download ordner holt und danach wieder zurück auf die html seite geht, leider zwei textfelder sieht - das erste, wo er seinen eintrag macht und das helfer div

kann man nicht irgendwie sagen:
pdf.save() ;
// schalte hier das helfer div aus
 
Werbung:
Verstehe. Bevor wir dem weiter nachgehen, versuche dies, ich habe, statt "display: none;" die Elemente durch "height: 0;" unsichtbar gemacht und hoffe, dass Edge dann auf den Inhalt Zugriff hat:
Code: 
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Formular</title>
    <style>
        .table-container {
            margin-top: 20px;
            margin-left: 120px;
            margin-right: 100px;
        }

        table {
            border-collapse: collapse;
            border: none;
        }

        th,
        td {
            border: 1px solid;
            padding: 4px;
            text-align: left;
            vertical-align: middle;
        }

        tr {
            vertical-align: middle;
        }

        .normaltext {
            text-align: left;
            font-size: 18px;
            color: black;
            font-weight: normal;
            padding-top: 10px;
        }

        .normaltext_fett {
            color: black;
            text-align: left;
            font-size: 18px;
            font-weight: bold;
            padding-top: 10px;
        }

        .textklein {
            color: black;
            font-size: 12px;
        }

        .no-border {
            border: 1px solid;
            background-color: #F5F6CE;
        }

        .input-color {
            color: black;
        }

        .button {
            background-color: green;
            border-color: white;
            color: white;
            font-size: 16px;
        }

        select {
            border: 1px solid;
            outline: none;
            background-color: #F5F6CE;
            width: 200px;
            padding-top: 10px;
        }

        #textarea {
            white-space: pre-wrap;
            /* Dies erzwingt die Anzeige der Zeilenumbrüche */
        }

        /* Während das PDF erzeugt wird, verbergen wir die Textarea: */
        main.creating-pdf textarea {
            height: 0;
        }

        /* Das Helfer-Div im Aussehen an die Textarea anpassen: */
        main .for-pdf {
            border: 1px solid lightgray;
            word-wrap: break-word;
        }

        /* Wird kein PDF erzeugt, verbergen wir das Helfer-Div: */
        main:not(.creating-pdf) .for-pdf {
            height: 0;
        }
    </style>
</head>


<body>
    <form id="Formular">
        <main>
            <div class="table-container">

                <table>
                    <tr>
                        <td colspan="11" class="normaltext_fett">Genehmigung:</td>
                    </tr>


                    <tr id="Genehmigungsdatum_id_date">
                        <td style="text-align:center">
                            <input type="radio" id="radio_Auflagen" name="Auflagen" onclick="pruefen_auflagen()">
                            <label> </label>
                        </td>
                        <td><input class="normaltext no-border" type="date" name="Genehmigungsdatum_date"
                                id="Genehmigungsdatum_date"></td>
                    </tr>
                    <tr id="Genehmigungsdatum_id_text" style="display: none;">
                        <td colspan="2"></td>
                        <td><input class="normaltext no-border" type="text" name="Genehmigungsdatum_text"
                                id="Genehmigungsdatum_text"></td>
                    </tr>
                    <tr>
                        <td class="normaltext">Text:</td>
                        <td class="normaltext" style="text-align:right">1.</td>
                        <td id="td_1_firma"> <input class="normaltext no-border" type="text" name="Firma1" id="firma1"
                                placeholder="" size="50"></td>
                    </tr>



                    <tr>
                        <td style="text-align:center">
                            <input type="radio" id="radio_Auflagen2" name="Auflagen" onclick="pruefen_auflagen()"
                                value="Auflagen2">
                            <label> </label>
                        </td>
                        <td colspan="9" class="normaltext">entsprechend den Auflagen / Anmerkungen in beiligender
                            Genehmigung</td>
                    </tr>

                    <tr>
                        <td></td>
                        <td colspan="9" height="80px">
                            <textarea name="Auflagen2" id="textarea" class="normaltext" cols="100" rows="4"
                                placeholder="" onclick="activate_radio_auflagen()"
                                oninput="updateTextarea()"></textarea>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2" class="normaltext_fett">Auswahl:</td>
                        <td colspan="9">
                            <select class="normaltext no-border" id="auswahl">
                                <option value="">bitte wählen</option>
                                <option value="aa">Auswahl A</option>
                                <option value="bb">Auswahl B</option>
                            </select>
                            <span style="color:white" id="ergebnis"></span>
                        </td>
                    </tr>


                    <tr>
                        <td colspan="11">
                            <div id="element-to-hide" data-html2canvas-ignore="true">
                                <button class="button" type="reset">Formular leeren</button>
                                <button class="button" type="submit" id="generatePdf">Formular als PDF drucken</button>
                            </div>
                        </td>
                    </tr>
                </table>


            </div>
        </main>
    </form>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script>
    <script src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>

    <script>

        window.onload = function () {
            pruefen_auflagen();
        };

        function pruefen_auflagen() {
            if (document.getElementById('radio_Auflagen').checked) {
                document.getElementById('textarea').value = "";
                document.getElementById('textarea').parentNode.parentNode.style.display = 'none'; // Hier wird die ganze Zeile ausgeblendet
            } else {
                document.getElementById('textarea').parentNode.parentNode.style.display = ''; // Hier wird die Anzeige der Zeile wiederhergestellt, falls nicht ausgewählt
            }
        }

        const
            // Das Element, das gedruckt werden soll, bereit stellen:
            elementToPrint = document.querySelector('main'),
            // Die Textareas bereit stellen:
            textareas = elementToPrint.querySelectorAll('main textarea');
        // Für alle Textareas:
        textareas.forEach(textarea => {
            // Helfer-Div dahinter einfügen und seine Breite
            // gleich der der Textarea setzen:
            const
                box = textarea.getBoundingClientRect();
            textarea.insertAdjacentHTML('afterend',
                `<div class="for-pdf" style="width: ${box.width}px"></div>`);
        });



        window.jsPDF = window.jspdf.jsPDF;
        document.getElementById('generatePdf').addEventListener('click', function (event) {
            event.preventDefault();

            // Bei dem Element, das gedruckt werden soll,
            // die Klasse "creating-pdf" hinzu fügen.
            // Davon abhängig wird die Sichtbarkeit der Textarea
            // und des Helfer-Divs im CSS gesteuert:
            elementToPrint.classList.add('creating-pdf');
            // Für alle Textareas:
            textareas.forEach(textarea => {
                // Den Text in das Helfer-Div dahinter eintragen:
                const
                    txt = textarea.value,
                    nextEle = textarea.nextElementSibling;
                nextEle.textContent = txt;
            });


            document.getElementById('element-to-hide').style.display = 'none';

            // Genehmigungsdatum
            if (document.getElementById('Genehmigungsdatum_date').value !== '') {
                document.getElementById('Genehmigungsdatum_id_date').style.display = 'none';
                document.getElementById('Genehmigungsdatum_id_text').removeAttribute('style');
                var genehmigungsdatum = document.getElementById('Genehmigungsdatum_date').value.split('-');
                document.getElementById('Genehmigungsdatum_text').value = genehmigungsdatum[2] + '.' + genehmigungsdatum[1] + '.' + genehmigungsdatum[0];
            }

            const pdf = new jsPDF();

            pdf.html(document.querySelector('main'), {
                html2canvas: {
                    scale: 0.16
                },

                callback: function (pdf) {
                    document.getElementById('element-to-hide').style.display = 'block';

                    // Rücksetzen der Stile für Datumsfelder
                    document.getElementById('Genehmigungsdatum_id_text').style.display = 'none';
                    document.getElementById('Genehmigungsdatum_id_date').style = '';


                    // Bei dem Element, das gedruckt wurde,
                    // die Klasse "creating-pdf" wieder löschen:
                    elementToPrint.classList.remove('creating-pdf');

                    pdf.save();
                }
            });
        });
    </script>

</body>

</html>
 
das haut leider nicht hin - die höhe wird im html ignoriert und steht im darunterliegendem Feld (Auswahl) und dazu ist im pdf der text verschoben um eine zeile nach unten dargestellt.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben