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>