hallo zusammen,
ich brauche dringend eure expertenhilfe. ich bastel schon seit tagen an einem textarea, welches in ein pdf ausgegeben wird. das klappt alles.
allerdings wird mir immer nur ein zeile im pdf ausgegeben. wie lässt sich der text im pdf mit zeilenumbruch darstellen?
kann mir bitte jemand helfen?
jetzt der code (habe ihn extra stark eingekürzt):
Vielen Dank schon mal ...
ich brauche dringend eure expertenhilfe. ich bastel schon seit tagen an einem textarea, welches in ein pdf ausgegeben wird. das klappt alles.
allerdings wird mir immer nur ein zeile im pdf ausgegeben. wie lässt sich der text im pdf mit zeilenumbruch darstellen?
kann mir bitte jemand helfen?
jetzt der code (habe ihn extra stark eingekürzt):
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Formular</title>
</head>
<body>
<form id="Formular">
<main>
<div class="table-container">
<table>
<tr>
<td></td>
<td colspan="9" height="80px">
<textarea name="Auflagen" id="textarea" cols="50" rows="5" wrap="soft" oninput="updateTextarea(this)"></textarea>
</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>
function updateTextarea(textarea) {
var lines = textarea.value.split(/\r\n|\r|\n/);
textarea.rows = lines.length || 1; // Setze mindestens 1 Zeile, falls der Textbereich leer ist
}
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.16
},
callback: function (pdf) {
document.getElementById('element-to-hide').style.display = 'block';
pdf.save();
}
});
});
</script>
</body>
</html>
Vielen Dank schon mal ...