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

Sclero2004 · 29 August 2023

Im button Tag das data-Attribut hinzu fügen:

Code:

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

ich76 · 29 August 2023

habe jetzt ganz schön basteln müssen. leider hat nix funktioniert, bis ich das mit style.display befehl geschafft habe. ist wahrscheinlich für profis gruselig ober erfüllt seinen zweck (zumindest erstmal)
hier mal mein 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>
<img src="bild.jpg" alt="Bild">
</td>
<td >
<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>
<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 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>

msi · 29 August 2023

ich76 schrieb:
ist wahrscheinlich für profis gruselig

Richtig.
Du benutzt z.B. im HTML-Code Klassen, die im StyleSheet nicht defininiert sind.
Du verwendest style im HTML-Code.

ich76 · 29 August 2023

und wie geht es richtig?

Sclero2004 · 29 August 2023

Weil ich den Dingen gern auf den Grund gehe, habe ich das mit dem Ausschließen des Buttons untersucht mit dem Ergebnis, dass beides bei mir im Firefox funktioniert, der Button taucht nicht im PDF auf:

Button außerhalb von main
Button innerhalb von main aber mit data-Attribut data-html2canvas-ignore="true"

Keine Ahnung, warum das bei dir nicht funktioniert.

Das Element unsichtbar zu machen ist natürlich auch eine Möglichkeit und nicht gruselig, nur anders ist es einfacher.

ich76 · 30 August 2023

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?

Sclero2004 · 30 August 2023

Anscheinend unterstützt jsPDF Seitenumbrüche, siehe dieses Beispiel:

jsPDF/examples/html2pdf/page_break.html at master · parallax/jsPDF

Client-side JavaScript PDF generation for everyone. - parallax/jsPDF

github.com

Versuche, dass CSS für das page-break in dem tr-Tag einzufügen wo der Seitenumbruch erzeugt werden soll.

ich76 · 30 August 2023

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>

Sclero2004 · 30 August 2023

Genau so hatte ich es auch verstanden und getestet und bei mir funktioniert es genau so wenig.
Ich untersuche das weiter ...

ich76 · 30 August 2023

ok, schade - ich bastel noch bisschen weiter und melde mich bei erfolg - danke für deine unterstützung

Sclero2004 · 30 August 2023

Ich habe jetzt auch das originale Beispiel von Github getestet und es funktioniert genau so wenig.

Sclero2004 · 30 August 2023

Es gibt jetzt zwei Möglichkeiten:

Wir melden das Problem auf Github.
Wir nehmen die Sache selbst in die Hand, wie Du schon angedeutet hast, mit mehreren Containern, allerdings würde ich dann Sections bevorzugen.

ich76 · 30 August 2023

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?

ich76 · 30 August 2023

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!

ich76 · 30 August 2023

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>

Sclero2004 · 30 August 2023

Das Problem wird hier diskutiert:

Can I use html() multiple times in a PDF · Issue #3074 · parallax/jsPDF

I want to export a PDF in a function. At the same time, the content inside is generated by using .html() many times. If only once .html() there is no problem at all. But I found that I used it twic...

github.com

und im aller letzten Posting hat braadworst eine elegante Lösung mit rekursivem Vorgehen gepostet. Ich empfehle, diese einzusetzen.

ich76 · 30 August 2023

wie baue ich das denn ein in meinen code? ich bin total überfragt?

msi · 30 August 2023

ich76 schrieb:
ich bin total überfragt?

Ich möchte mich hier ja eigenlich nicht einmischen, aber du hast dich noch nicht mal eine Stunde damit beschäftigt und wartest nur darauf, dass dir das jemand macht. Du solltest etwas mehr Zeit investieren.

ich76 · 30 August 2023

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???

Sclero2004 · 30 August 2023

Kann ich bestätigen, #76 funktioniert bei mir auch nicht, die Folgeseiten bleiben leer. Dabei ist das von Ende Juli dieses Jahres, sonst hätte ich vermutet, dass in jsPDF was geändert wurde.

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

Mitglied

Mitglied

Mitglied

Mitglied

Mitglied

Mitglied

Mitglied

Mitglied

Mitglied

Mitglied

Mitglied

Mitglied

Mitglied

Mitglied

Mitglied

Mitglied

Mitglied

Mitglied

Mitglied

Mitglied