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

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

ach und noch etwas: jetzt teste ich mein formular die ganze zeit im firefox und muss mit erschrecken feststellen, das es im edge nicht funktioniert??? Was ist denn nun noch kaputt?
 
Werbung:
Vielen Dank für die Unterstützung!
das formular habe ich mit ein paar margins noch hübsch gemacht.
was allerdings überhaupt nicht funktioniert ist der pdf druck beim öffnen im edge - habt ihr da noch eine idee?
 
Werbung:
edge ist im ie modus gewesen - habe ich für eine ältere Anwendung irgendwann mal gebraucht.
jetzt funktioniert es
Vielen DANK für die Hilfe
 
Werbung:
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>
 
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
 
Werbung:
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
 
Werbung:
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?
 
Werbung:
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?
 
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?
 
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>
 
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben