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

Frage textarea zeilenumbruch im pdf mit java ?

I

ich2000

Mitglied
hallo zusammen,
ich brauche dringend eure expertenhilfe. ich bastel schon seit tagen an einem textarea, welches in ein pdf ausgegeben wird. das klappt alles.

allerdings wird mir immer nur ein zeile im pdf ausgegeben. wie lässt sich der text im pdf mit zeilenumbruch darstellen?

kann mir bitte jemand helfen?

jetzt der code (habe ihn extra stark eingekürzt):


HTML: 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Formular</title>
</head>
<body>
<form id="Formular">
<main>
<div class="table-container">

    <table>
        <tr>
            <td></td>
            <td colspan="9" height="80px">
                <textarea name="Auflagen" id="textarea" cols="50" rows="5" wrap="soft"  oninput="updateTextarea(this)"></textarea>
            </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>

function updateTextarea(textarea) {
    var lines = textarea.value.split(/\r\n|\r|\n/);
    textarea.rows = lines.length || 1; // Setze mindestens 1 Zeile, falls der Textbereich leer ist
}
        window.jsPDF = window.jspdf.jsPDF;
        document.getElementById('generatePdf').addEventListener('click', function (event) {
            event.preventDefault();
            document.getElementById('element-to-hide').style.display = 'none';
            const pdf = new jsPDF();
            pdf.html(document.querySelector('main'), {
                html2canvas: {
                    scale: 0.16
                 },
                callback: function (pdf) {
                    document.getElementById('element-to-hide').style.display = 'block';
                    pdf.save();
                }
            });
        });
    </script>

</body>
</html>



Vielen Dank schon mal ...
 
Werbung:
Ich habe das mal getestet und bei mir (Opera) funktioniert es wie gewünscht: Drei Zeilen in der Textarea eingegeben und sie werden wie gewünscht genau so im PDF abgebildet.
 
hallo und danke für die antwort und tests
habe mir gerade den opera runtergeladen und der zeilenumbruch funktioniert nur im html dokument, nicht aber im pdf
was mach ich denn falsch oder du anders?

so sieht das html formular aus:
Formular.png
uns so sieht das pdf aus:
pdf.png
 
Zuletzt bearbeitet:
Werbung:
Da stehe ich jetzt auch vor einem Rätsel. Das Javascript wird vom CDN geladen, d. h. es muss bei uns beiden identisch sein. Zeilenumbruch könnte auch vom BS abhängig sein. Bist Du auch auf Windows?
Anbei mein Test-PDF.
 

Anhänge

  • generated.pdf
    8,2 KB · Aufrufe: 3
ah, du hast beim schreiben schon "enter" gedrückt und nicht fortlaufend geschrieben, oder?
dann sieht es bei mir auch gut aus!
 
Werbung:
aber wie bekomme ich denn den allgemeinen user dazu, zwischendurch enter zu drücken, statt fortlaufend zu schreiben?
 
Genau, die Idee kam mir auch gerade, als ich deinen Screenshot gesehen habe. Das ist dann der Unterschied!
Fehlt nur eine Lösung, wie man den automatischen Zeilenumbruch im PDF abbilden kann. Ich werde darüber nachdenken.
 
Werbung:
vielen dank!!! bin für jede unterstützung dankbar
geht das vielleicht über eine art berechnung? sowas wie: wenn anzahl zeichen erreicht, dann setze <br> rein???
 
Da habe ich auch schon daran gedacht. Eine Alternative: Den Inhalt der Textarea temporär für das Drucken in ein Div schreiben. Hoffentlich werden dann die automatischen Zeilenumbrüche richtig berücksichtigt.
 
Werbung:
ich bin leider nicht java fit - ich würde mich freuen etwas hilfe zu erhalten, dann lerne ich es für die nächste anwendung
vielen dank!
 
Werbung:
nein, dahinter steckt ein formular (also eine tabelle) mit radio button, vielen normalen texten und select feldern
das textarea habe ich an der stelle eingefügt, da ich nicht abschätzen kann, wie viel der user einträgt
 
Fertig, versuche dies:
Code: 
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Formular</title>
    <style>
        /* 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></td>
                        <td colspan="9" height="80px">
                            <textarea name="Auflagen" id="textarea" cols="50" rows="5" wrap="soft"
                                oninput="updateTextarea(this)"></textarea>
                        </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>
        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>`);
        });
        function updateTextarea(textarea) {
            var lines = textarea.value.split(/\r\n|\r|\n/);
            textarea.rows = lines.length || 1; // Setze mindestens 1 Zeile, falls der Textbereich leer ist
        }
        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;
            });
            const pdf = new jsPDF();
            pdf.html(document.querySelector('main'), {
                html2canvas: {
                    scale: 0.16
                },
                callback: function (pdf) {
                    // Bei dem Element, das gedruckt wurde,
                    // die Klasse "creating-pdf" wieder löschen:
                    elementToPrint.classList.remove('creating-pdf');
                    pdf.save();
                }
            });
        });
    </script>

</body>

</html>
Dieses updateTextareas berücksichtigt leider ebenfalls nicht die automatischen Zeilenumbrüche, aber das habe ich erst Mal auf sich beruhen lassen.
 
Werbung:
vielen dank - habs grad getestet. klappt super!
jetzt muss ich nur noch komplett verstehen, damit ich es auf mehrere textareas anwenden kann. das krieg ich aber raus - wenn nicht, melde ich mich nochmal
dankeschöne und schöne restwoche - bin die nächsten tage erstmal unterwegs - wird wahrscheinlich erst in 2 wochen
 
Das berücksichtigt schon mehrere Textareas, versuche es, ich bin auf Nummer sicher gegangen. Siehe die forEach-Schleifen.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben