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

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

I

ich2000

Mitglied
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>
 
Werbung:
Werbung:
oje, ich habe keine Ahnung mit php. Wie stelle ich das an. Könnt ihr bitte unterstützen? Bau ich das in den html code mit ein????
 
Werbung:
Super, vielen Dank. Habs gleich probiert und funktioniert! Dankeschön!

Jetzt bekomme ich aber ausschließlich die Formularfelder mit den Eingaben ausgegeben. Wenn ich das Formular noch aufhübsche (mit Tabellen, ja, nein RadioButtons), bekomme ich das dann auch gedruckt?
Ich habe praktisch ein Anmeldeformular und möchte, dass der Nutzer das Formular als pdf ablegen kann. Geht sowas auch?
 
Werbung:
ich nochmal, habe noch etwas recherchiert und folgendes neu probiert:
In dem folgenden Code soll wohl der Inhalt des Formulars in ein Bild konvertiert werden und dieser dann als pdf ausgegeben werden. funktioniert leider in meinem code nicht. hab ich wieder etwas vergessen?


<!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="js/jspdf.min.js"></script>
<script src="js/html2canvas.min.js"></script>
<script src="js/html2pdf.min.js"></script>

</head>

<body>
<form id="Formular" >
<div id="formular">
<div class="table-container">
<table>
<tr>
<td>Name:</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" onclick="printPDF();">PDF erstellen</button>
</form>

<script>
function printPDF() {
var element = document.getElementById("formular");
var opt = {
margin: 1,
filename: 'myfile.pdf',
image: { type: 'jpeg', quality: 0.98 },
html2canvas: { scale: 2 },
jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
};
html2pdf(element);
}
</script>
</body>
</html>
 
Werbung:
ich werd irre, es will und will nicht funktionieren
Mein code sieht jetzt so aus und ich bekomme trotzdem folgenden Konsolenwert:
0ms html2canvas: html2canvas 1.0.0-alpha.12


<!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="js/jspdf.min.js"></script>
<script src="js/html2canvas.min.js"></script>
<script src="js/html2pdf.min.js"></script>

<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>


</head>

<body>
<form id="Formular" >
<div id="formular">
<div class="table-container">
<table>
<tr>
<td>Name:</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" onclick="printPDF();">PDF erstellen</button>
</form>

<script>
function printPDF() {
var element = document.getElementById("formular");
var opt = {
margin: 1,
filename: 'myfile.pdf',
image: { type: 'jpeg', quality: 0.98 },
html2canvas: { scale: 2 },
jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
};
html2pdf(element);
}
</script>

<script>
window.jsPDF = window.jspdf.jsPDF;
document.getElementById('generatePdf').addEventListener('click', function (event) {
event.preventDefault();
const pdf = new jsPDF();
pdf.html(document.body, {
callback: function (pdf) {
pdf.save();
}
});
});
</script>




</body>
</html>
 
Ah ich glaub jetzt hab ichs!
Mein Code sieht jetzt so aus (siehe unten) - Jetzt werden mir aber 4 Seiten pdf ausgegeben. Wie grenze ich das auf die Form"formular" ein?

<!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>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>
</head>

<body>
<form id="Formular" >
<div id="formular">
<div class="table-container">
<table>
<tr>
<td>Name:</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" onclick="printPDF();">PDF erstellen</button>
</form>

<script>
window.jsPDF = window.jspdf.jsPDF;
document.getElementById('formular').addEventListener('click', function (event) {
event.preventDefault();
const pdf = new jsPDF();
pdf.html(document.body, {
callback: function (pdf) {
pdf.save();
}
});
});
</script>

</body>
</html>
 
Werbung:
ja, mein Ergeiz ist groß, nur das Wissen manchmal noch zu gering

Vielen Dank, für die Hilfe ... das mit der einen seite ist schon top. vielleicht lässt sich irgendwas mit scalierung machen? Der text erscheint mir ziemlich groß???
 
sorry, ich komme nicht weiter
wie kann ich den scale oder die größe des Dokumentes ändern?

In der Konsole steht:
#1 0ms Starting document clone with size 1120x1538 scrolled to 0,0
#1 110ms Document cloned, element located at -100000,0 with size 1109x1537.5333251953125 using computed rendering
#1 111ms Starting DOM parsing
#1 153ms Starting renderer for element at -100000,0 with size 1109x1538
#1 153ms Canvas renderer initialized (1109x1538) with scale 1
#1 237ms Finished rendering

Wie ändere ich denn die Auflösung im js oder den scale?
 
ah, super. vielen dank für die hilfe, es klappt!
jetzt ist aber die darstellung im pdf abhängig von der browserauflösung
stellt man 150 % ein ist das pdf anders als bei 60%
bekommt man das einheitlich ins pdf?
 
Werbung:
ach nein, habs rausbekommen
meine Überschrift war mittig ausgerichtet und je nachdem welche Auflösung mein Browser hatte, war die Überschrift auf dem pdf drauf oder nicht
habe jetzt meine Überschrift auf left definiert und dann erscheint sie immer mit
aber gibt es einen befehl, wie ich das ganze dokument zentrisch ausrichte?
sowas wie :
html2canvas: {
// insert html2canvas options here, e.g.
scale: 0.25
??? : centre;
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben