Hallo,
ich habe vor einiger Zeit hier schon einmal richtig gute Hilfe erhalten und bin guter Hoffnung.
Ich habe ein Formular gebaut (für dieses Forum extrem reduziert) und möchte dort Felder mit Texten und Datumsangaben füllen. Funktioniert alles super. Danach gebe ich dies aber als ein pdf Dokument aus.
Und jetzt jetzt kommts: Alle auszufüllenden Felder kleben am oberen Rand. Im Browser alles noch hübsch. In der PDF Schrott.
Ich habe den Code versucht so gering wie möglich zu halten, bin leider nur Gelegenheits-HTMLer. Bitte um Nachsicht!
Habe schon mit einigen Styleanpassungen rumgebastelt:
ich habe vor einiger Zeit hier schon einmal richtig gute Hilfe erhalten und bin guter Hoffnung.
Ich habe ein Formular gebaut (für dieses Forum extrem reduziert) und möchte dort Felder mit Texten und Datumsangaben füllen. Funktioniert alles super. Danach gebe ich dies aber als ein pdf Dokument aus.
Und jetzt jetzt kommts: Alle auszufüllenden Felder kleben am oberen Rand. Im Browser alles noch hübsch. In der PDF Schrott.
Ich habe den Code versucht so gering wie möglich zu halten, bin leider nur Gelegenheits-HTMLer. Bitte um Nachsicht!
Habe schon mit einigen Styleanpassungen rumgebastelt:
- style="vertical-align: middle;"
- document.getElementById('...').style.verticalAlign = 'middle'
- document.querySelector('...').style.verticalAlign = 'middle'
- document.querySelector('').classList.add('vertical-center')
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Formular_Auftrag_Ausschreibung</title>
<style>
.table-container {
margin-top: 20px;
margin-left: 120px;
margin-right: 100px;
}
table {
border-collapse: collapse;
border: none;
}
th, td {
border: 1px solid;
padding: 4px;
text-align: left;
vertical-align: middle;
}
tr {
vertical-align: middle;
}
.normaltext {
text-align: left;
font-size: 18px;
color: black;
font-weight: normal;
}
.normaltext_fett {
color: black;
text-align: left;
font-size: 18px;
font-weight: bold;
}
.textklein {
color: black;
font-size: 12px;
}
.no-border {
border: 1px solid;
background-color: #F5F6CE;
}
.input-color {
color: black;
}
.button {
background-color: green;
border-color: white;
color: white;
font-size: 16px;
}
</style>
</head>
<body>
<form id="Formular">
<main>
<div class="table-container">
<table>
<tr>
<td colspan="11" class="normaltext_fett">Genehmigung:</td>
</tr>
<tr>
<td class="normaltext" >Text:</td>
<td class="normaltext" style="text-align:right">1.</td>
<td id="td_1_firma" > <input class="normaltext no-border" type="text" name="Firma1" id="firma1" placeholder="" size="50"></td>
</tr>
<tr id="Genehmigungsdatum_id_date">
<td colspan="2"></td>
<td><input class="normaltext no-border" type="date" name="Genehmigungsdatum_date" id="Genehmigungsdatum_date" ></td>
</tr>
<tr id="Genehmigungsdatum_id_text" style="display: none;">
<td colspan="2"></td>
<td><input class="normaltext no-border" type="text" name="Genehmigungsdatum_text" id="Genehmigungsdatum_text"></td>
</tr>
<tr>
<td colspan="11">
<div id="element-to-hide" data-html2canvas-ignore="true">
<button class="button" type="reset" >Formular leeren</button>
<button class="button" type="submit" id="generatePdf">Formular als PDF drucken</button>
</div>
</td>
</tr>
</table>
</div>
</main>
</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();
document.getElementById('element-to-hide').style.display = 'none';
// Genehmigungsdatum
if (document.getElementById('Genehmigungsdatum_date').value !== '') {
document.getElementById('Genehmigungsdatum_id_date').style.display = 'none';
document.getElementById('Genehmigungsdatum_id_text').removeAttribute('style');
var genehmigungsdatum = document.getElementById('Genehmigungsdatum_date').value.split('-');
document.getElementById('Genehmigungsdatum_text').value = genehmigungsdatum[2] + '.' + genehmigungsdatum[1] + '.' + genehmigungsdatum[0];
}
const pdf = new jsPDF();
pdf.html(document.querySelector('main'), {
html2canvas: {
scale: 0.18
},
callback: function (pdf) {
document.getElementById('element-to-hide').style.display = 'block';
document.getElementById('Genehmigungsdatum_id_text').style.display = 'none';
document.getElementById('Genehmigungsdatum_id_date').style = '';
pdf.save();
}
});
});
</script>
</body>
</html>