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

[ERLEDIGT] html Formular als pdf speichern und als download zur Verfügung stellen

vielen dank für die unterstützung und tipps
jetzt noch eine letzte Frage zu diesem Thema:
wenn ich ein Formular habe, welches über mehrere Seiten geht - bekomme ich den pdf druck dann über mehrere main Definitionen hin?
 
das klingt vielversprechend, aber ich bin zu doof den java code zu verstehen. habe sogar die tabelle geteilt
wie muss ich den ändern, damit es klappt? jetzt wird ein pdf mit einer seite ausgegeben, obwohl der code:
style="page-break-before: always;"
den seitenumbruch erzwingen sollte???
hier mal wieder mein code:
Code: 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Formular_Aufnahmeantrag</title>
    <style>
        .form-title {
            text-align: center;
            margin-left: 300px;
            font-weight: bold;
            font-size: 30px;
        }
        .table-container {
            margin-top: 10px;                         
            margin-left: 150px;
            margin-right: 150px;
        }
        table {
               border-collapse: collapse;
               border: none;
        }
        th, td {
            border: solid 1px;                             
            padding: 6px;
            text-align: left;
        }
        img {
            max-width: 20%;
            height: auto;
        }
    </style>
</head>

<body>
    <main>
    <form id="Formular">

    <div class="table-container">
        <table>
            <tr>
                <td width="400px">
                    <img src="bild.jpg" alt="Bild">
                </td>
                <td width="400px">
                    <p style="text-align:right" class="textkopfzeile"> Verein </p>
                    <p style="text-align:right" class="textklein"> für sonstiges </p>
                </td>
            </tr>           
            <tr>
                <td colspan="2" class="form-title"> Aufnahmeantrag </td>
            </tr>
            </table>
            
            <table>
            <tr style="page-break-before: always;">
                <td style="text-align:left" class="normaltext_fett"> Der Verein </td>
                <td style="text-align:left" ><input class="no-border" type="text" name="Verein" placeholder="Name" size="50" ></td>
            </tr>           
            <tr>
                <td width="400px" style="text-align:left" class="normaltext_fett"> beantragt die Aufnahme zum  </td>
                <td width="400px" style="text-align:left" > <input class="normaltext" type="date" name="Datum" class="no-border"></td>
            </tr>
        </table>
    </div>
    </form>   
    </main>


<div id="element-to-hide" data-html2canvas-ignore="true">
    <button type="submit" id="generatePdf">Formular als PDF drucken</button>
</div>

    <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';

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

                pdf.save();
            }
        });
    });
    </script>
</body>
</html>
 
ich weiß auch nicht
ich habe das jetzt mit mehreren containern und unterschiedlichen forms getestet. nix funktioniert
vielleicht muss man in dem java script noch was anpassen?
 
eine kleine erkenntnis!
habe mein formular auf der website hochgeladen und dort mit dem button gedruckt - es erscheint 1 pdf
wenn man aber die druckfunktion des browsers nutzt, also die internetseite druckt, erscheinen 2 pdf seiten

das heißt, der code funktioniert aber nicht in verbindung mit dem button!
 
bin einen schritt weiter, habe zwei formulare gebaut 1 und 2 und den java code erweitert:
jetzt werden zwei pdf seiten erzeugt, aber nur die erste ist gefüllt
ist im java noch ein fehler?
hier mein code:
Code: 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Formular_Aufnahmeantrag</title>
    <style>
        .form-title {
            text-align: center;
            margin-left: 300px;
            font-weight: bold;
            font-size: 30px;
        }
        .table-container {
            margin-top: 10px;                         
            margin-left: 150px;
            margin-right: 150px;
        }
        table {
               border-collapse: collapse;
               border: none;
        }
        th, td {
            border: solid 1px;                             
            padding: 6px;
            text-align: left;
        }
        img {
            max-width: 20%;
            height: auto;
        }
    </style>
</head>




<body>
    <main>
    <form id="Formular1">
    <div class="table-container">
        <table>
            <tr>
                <td width="400px">
                    <img src="bild.jpg" alt="Bild">
                </td>
                <td width="400px">
                    <p style="text-align:right" class="textkopfzeile"> Verein </p>
                    <p style="text-align:right" class="textklein"> für sonstiges </p>
                </td>
            </tr>           
            <tr>
                <td colspan="2" class="form-title"> Aufnahmeantrag </td>
            </tr>
        </table>
    </div>
    </form>
    <form id="Formular2">
    <div class="table-container">
        <table>           
            <tr>
                <td style="text-align:left" class="normaltext_fett"> Der Verein </td>
                <td style="text-align:left" ><input class="no-border" type="text" name="Verein" placeholder="Name" size="50" ></td>
            </tr>           
            <tr>
                <td width="400px" style="text-align:left" class="normaltext_fett"> beantragt die Aufnahme zum  </td>
                <td width="400px" style="text-align:left" > <input class="normaltext" type="date" name="Datum" class="no-border"></td>
            </tr>
        </table>
    </div>
    </form>   
    </main>


<div id="element-to-hide" data-html2canvas-ignore="true">
    <button type="submit" id="generatePdf">Formular als PDF drucken</button>
</div>



    <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';

    const pdf = new jsPDF('p', 'pt', 'a4');

    const firstFormElement = document.getElementById('Formular1');
    pdf.html(firstFormElement, {
        html2canvas: {
            scale: 0.5
        },
        callback: function (pdf) {
            pdf.addPage();
            
    const secondFormElement = document.getElementById('Formular2');
    pdf.html(secondFormElement, {
        html2canvas: {
            scale: 0.5
        },
        callback: function (pdf) {
        
        document.getElementById('element-to-hide').style.display = 'block';
             pdf.save();
    
        }
        });
        }
    });
});
</script>

</body>
</html>
 
wenn du wüsstest, wie viel Varianten ich durchprobiert habe und nebenbei noch im www recherchiert

ich steh hier kurz vorm ziel und weiß nicht warum im code #75 die zweite seite leer bleibt, obwohl offensichtlich alles passt
#76 hatte ich auch in meinem code, da bewegt sich gar nichts wenn ich den button drücke???
 
super!!!
habs gerade mit "table" als trennung probiert und funktioniert genau wie gewollt.
allerdings habe ich die zeile: pdf.addPage('a4', 'p'); entfernt, mit dieser hätte ich am ende immer noch eine leere seite erhalten.
vielen dank für die hilfe und tipps!
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben