Info Formular pdf Ausgabe - Eingabefelder lassen sich nicht vertikal mittig ausrichten

ich2000 · 22 März 2024

Hallo,
ich habe vor einiger Zeit hier schon einmal richtig gute Hilfe erhalten und bin guter Hoffnung.
Ich habe ein Formular gebaut (für dieses Forum extrem reduziert) und möchte dort Felder mit Texten und Datumsangaben füllen. Funktioniert alles super. Danach gebe ich dies aber als ein pdf Dokument aus.
Und jetzt jetzt kommts: Alle auszufüllenden Felder kleben am oberen Rand. Im Browser alles noch hübsch. In der PDF Schrott.

Ich habe den Code versucht so gering wie möglich zu halten, bin leider nur Gelegenheits-HTMLer. Bitte um Nachsicht!
Habe schon mit einigen Styleanpassungen rumgebastelt:

style="vertical-align: middle;"
document.getElementById('...').style.verticalAlign = 'middle'
document.querySelector('...').style.verticalAlign = 'middle'
document.querySelector('').classList.add('vertical-center')

Brachte alles nix??? Was mach ich falsch? Hat jemand eine Idee? Vielen Dank schonmal für die Mühen ...

Code:

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

    <title>Formular_Auftrag_Ausschreibung</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;
        }
        .normaltext_fett {
            color: black;
            text-align: left;
            font-size: 18px;
            font-weight: bold;
        }
        .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;
        }

    </style>
</head>


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

        <table>
            <tr>
                <td colspan="11" class="normaltext_fett">Genehmigung:</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 id="Genehmigungsdatum_id_date">
                <td colspan="2"></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 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.jsPDF = window.jspdf.jsPDF;
    document.getElementById('generatePdf').addEventListener('click', function (event) {
        event.preventDefault();

        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.18
            },
            callback: function (pdf) {
                document.getElementById('element-to-hide').style.display = 'block';

                document.getElementById('Genehmigungsdatum_id_text').style.display = 'none';
                document.getElementById('Genehmigungsdatum_id_date').style = '';

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

</body>
</html>

ich2000 · 25 März 2024

Hallihallo,
ich habe rausgefunden, dass die Schriftgröße des "normaltext" im style dieses Phänomen verursacht und habe ein padding-top hinzugefügt. Jetzt geht es so halbwegs. Vielleicht hat doch noch jemand eine andere schönere Lösung für mich? Hier mein neuer Code:

Code:

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

    <title>Formular_Auftrag_Ausschreibung</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;
        }
    </style>
</head>


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

        <table>
            <tr>
                <td colspan="11" class="normaltext_fett">Genehmigung:</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 id="Genehmigungsdatum_id_date">
                <td colspan="2"></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 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.jsPDF = window.jspdf.jsPDF;
    document.getElementById('generatePdf').addEventListener('click', function (event) {
        event.preventDefault();

        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.18
            },
            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 = '';

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

</body>
</html>

Sempervivum · 25 März 2024

Padding ist sicher eine gute Möglichkeit.

Ich habe mal versucht, das mit Flex zu zentrieren und die Abmessungen des main-Containers entspr. einer DIN-A4-Seite gesetzt:

Code:

        main {
            width: 210mm;
            height: 297mm;
            display: flex;
            justify-content: center;
            align-items: center;
        }

Wenn ich dann die Skalierung passend einstelle, ist das Element zentriert.

Code:

            const pdf = new jsPDF('p', 'mm', [297, 210]);

            pdf.html(document.querySelector('main'), {
                html2canvas: {
                    scale: 0.26
                },
                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 = '';

                    pdf.save();
                }
            });

Wahrscheinlich musst Du die Abmessungen von main dann ebenfalls dynamisch für die PDF-Ausgabe setzen.

ich2000 · 26 März 2024

Hallo und vielen Dank für die Unterstützung.
Bei der Methode wird zwar das Dokument als solches mittig ausgerichtet, aber nicht die Eingaben in den Inputfeldern. Ich bleibe vorerst bei der padding-top Methode.
Trotzdem DANKE

Info Formular pdf Ausgabe - Eingabefelder lassen sich nicht vertikal mittig ausrichten

ich2000

Mitglied

ich2000

Mitglied

Sempervivum

Senior HTML'ler

ich2000

Mitglied

Neueste Beiträge