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

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

I

ich76

Mitglied
hallo - konntest du das problem mit den schriften lösen? Ich bin da noch auf etwas anderes gestoßen:
ich brauchte noch ein anderes formular und habe die geistigen ergüsse gleich nutzen wollen
ich bin dann mit der variante der skalierung der pdf hängengeblieben - da sieht das ergebnis meines erachtens am besten aus!
aber jetzt wollte ich ein bild in mein formular einbinden - das sieht im html auch gut aus, aber der effekt im pdf ist erschreckend.
1. das bild erscheint nicht in spalte 1
2. alle elemente aus spalte 2 werden auch nicht dargestellt? (die daten aus spalte 1 werden übertragen)
entferne ich das bild, ist alles top? wie kann das sein? hier mal der 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>
</main>
<button type="submit" id="generatePdf">Formular als PDF drucken</button>


</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();
const pdf = new jsPDF();
pdf.html(document.querySelector('main'), {
html2canvas: {
scale: 0.19
},
callback: function (pdf) {
pdf.save();
}
});
});
</script>

</body>
</html>
 
S

Sclero2004

Mitglied
Stop, ich sehe da einen Strukturfehler in deinem HTML, ziemlich am Schluss:
Code: 
    <main>
        <form id="Formular">

            <div class="table-container">
                <table>
                    <tr>
                        <td>
                            <img src="images/dia0.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>
            <!-- und hier muss das schließende Tag hinein -->
    </main>
    <button type="submit" id="generatePdf">Formular als PDF drucken</button>


    </form> <!-- das schließende Tag muss hier heraus -->
    <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>
Bei mir wird das PDF trotzdem fehlerfrei generiert, aber je nach dem, welchen Browser Du benutzt, könnte es die Ursache sein, dass Du Fehler bekommst.
 
I

ich76

Mitglied
das war leider nicht die lösung?
mein pdf sieht so aus (siehe anlage)

komisch ist, wenn ich den codeschnipsel (<img src="bild.jpg" alt="Bild">) lösche, funktioniert es?

Unbenannt.png
 
S

Sclero2004

Mitglied
Sehe keinen Anhang, nur ein PNG-Bild. Ist das Bild jetzt der Fall ohne Bild, wo es OK ist?
Schreib erste Mal, welchen Browser Du benutzt, dann teste ich es damit, die gängigen unter Windows habe ich installiert.
 
I

ich76

Mitglied
ich arbeite aktuell mit mozilla firefox
das ist jetzt die variante wo bild und texte in spalte 2 fehlen

ps wie hänge ich denn hier ein pdf an? habs leider nicht gefunden, sorry
 
S

Sclero2004

Mitglied
Es geht also um die Formularfelder. Das funktioniert bei mir im Firefox ebenfalls einwandfrei. Standardfrage: Hast Du ein Plugin installiert, das das blocken könnte
 
S

Sclero2004

Mitglied
Dann müssen wir wohl in den Einstellungen suchen. Ich habe aber aus dem Stand keine Idee, was da verantwortlich sein könnte.

Oder vielleicht könnten sich auch unsere Reader unterschiedlich verhalten. Ich hänge noch Mal mein neuestes, mit FF generiert, an. Check mal, ob dein Reader das richtig anzeigt. Ich benutze einen, der ziemlich alt ist: PDF-XChange. Welchen benutzt Du?
 

Anhänge

  • generated (3).pdf
    156,9 KB · Aufrufe: 2
I

ich76

Mitglied
ich nutze auch pdf xchange, habe aber auch schon mit pdf24 getestet
dein pdf sieht gut aus, alles da!

ich habe mal den html code auf meiner internetseite hochgeladen und siehe da das bild und die formulardaten sind da
was ist denn dabei der unterschied zur lokalen ausführung auf dem pc?
 
S

Sclero2004

Mitglied
Dann vermute ich, dass Du die HTML über Doppelklick, Öffnen (mit), etc. gestartet hast, während ich einen lokalen Webserver benutze. Rasch getestet, et voila, wenn ich ebenfalls mit Doppelklick öffne fehlen ebenfalls die betr. Einträge.
Generell ist es so, dass manches nicht funktioniert, wenn man keine Webserver benutzt.
 
I

ich76

Mitglied
ah, wieder etwas dazu gelernt ! vielen dank !

muss ich denn auf dem webserver noch mehr beachten???
zum beispiel wird jetzt der button zum pdf drucken mit ins pdf gebracht, obwohl </main> vorher im code steht? gibt es einen befehl, der den button grundsätzlich nicht mit ins pdf druckt?
 
S

Sclero2004

Mitglied
zum beispiel wird jetzt der button zum pdf drucken mit ins pdf gebracht, obwohl </main> vorher im code steht?
Zum Vergrößern anklicken....
Bei mir ist das nicht der Fall, siehe meinen Anhang in #55. Den Strukturfehler hast Du korrigiert?

gibt es einen befehl, der den button grundsätzlich nicht mit ins pdf druckt?
Zum Vergrößern anklicken....
Du kannst bei dem Element ein data-Attribut anbringen, das das Drucken verhindert:
You can hide some elements using the following tag:

<div id="element-to-hide" data-html2canvas-ignore="true"></div>
Zum Vergrößern anklicken....
 
I

ich76

Mitglied
den strukturfehler habe ich korrigiert, an dem lag es leider nicht

wie bringe ich denn den anderen befehl ins spiel? ich weiß immer nicht, an welche stelle ich den code platzieren muss?
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Werbung:

Neueste Beiträge

Oben