Hallo, ich fange gerade mit html an und habe ein Formular entwerfen müssen. Einen kleinen Auszug daraus schicke ich mit. Jetzt soll das Formular als pdf gedruckt und zum download dem Nutzer zur Verfügung gestellt werden. ich hänge da schon den ganzen Tag dran und der Button "pdf drucken" tut nicht was er soll. Was fehlt noch? Bitte um Untersützung! Dankeschön!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Beispiel Formular</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script>
</head>
<body>
<form id="Formular" >
<div class="table-container">
<table>
<tr>
<td>Name TG:</td>
<td><input type="text" name="Name" placeholder=" " size="60"></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td>Nummer</td>
<td><input type="text" name="Nummer" placeholder=" " size="60"></td>
</tr>
</table>
</div>
<button type="submit" id="generatePdf">PDF drucken</button>
</form>
<script>
document.getElementById('generatePdf').addEventListener('click', function () {
const form = document.getElementById('Formular');
const formData = new FormData(form);
const pdf = new jsPDF();
let pdfContent = '';
formData.forEach(function(value, key) {
pdfContent += `${key}: ${value}\n`;
});
pdf.text(pdfContent, 10, 10);
pdf.save('formular.pdf');
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Beispiel Formular</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script>
</head>
<body>
<form id="Formular" >
<div class="table-container">
<table>
<tr>
<td>Name TG:</td>
<td><input type="text" name="Name" placeholder=" " size="60"></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td>Nummer</td>
<td><input type="text" name="Nummer" placeholder=" " size="60"></td>
</tr>
</table>
</div>
<button type="submit" id="generatePdf">PDF drucken</button>
</form>
<script>
document.getElementById('generatePdf').addEventListener('click', function () {
const form = document.getElementById('Formular');
const formData = new FormData(form);
const pdf = new jsPDF();
let pdfContent = '';
formData.forEach(function(value, key) {
pdfContent += `${key}: ${value}\n`;
});
pdf.text(pdfContent, 10, 10);
pdf.save('formular.pdf');
});
</script>
</body>
</html>