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

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

I

ich76

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

Sclero2004

Mitglied
Das Problem ist, dass dieses jsPDF modulorientiert angelegt ist. Das ist ein Thema, bei dem ich mich bisher vergeblich bemüht habe, einen Einstieg zu finden, siehe auch hier:

Laden…

www.html.de
Ein Workaround, den ich bisher gefunden habe, sieht so aus, dass ich in dem UMD-Skript die Variable exports global gemacht habe:
Code: 
    exports.AcroForm = AcroForm;
    exports.AcroFormAppearance = AcroFormAppearance;
    exports.AcroFormButton = AcroFormButton;
    exports.AcroFormCheckBox = AcroFormCheckBox;
    exports.AcroFormChoiceField = AcroFormChoiceField;
    exports.AcroFormComboBox = AcroFormComboBox;
    exports.AcroFormEditBox = AcroFormEditBox;
    exports.AcroFormListBox = AcroFormListBox;
    exports.AcroFormPasswordField = AcroFormPasswordField;
    exports.AcroFormPushButton = AcroFormPushButton;
    exports.AcroFormRadioButton = AcroFormRadioButton;
    exports.AcroFormTextField = AcroFormTextField;
    exports.GState = GState;
    exports.ShadingPattern = ShadingPattern;
    exports.TilingPattern = TilingPattern;
    exports.default = jsPDF;
    exports.jsPDF = jsPDF;
    window.exports_jsPDF = exports; // exports global machen

    Object.defineProperty(exports, '__esModule', { value: true });

})));
//# sourceMappingURL=jspdf.umd.js.map
Dann kann man so auf jsPDS zugreifen:
Code: 
    <script>
        document.getElementById('generatePdf').addEventListener('click', function () {
            const form = document.getElementById('Formular');
            const formData = new FormData(form);
            const pdf = new exports_jsPDF.jsPDF();

            let pdfContent = '';
            formData.forEach(function (value, key) {
                pdfContent += `${key}: ${value}\n`;
            });

            pdf.text(pdfContent, 10, 10);
            pdf.save('formular.pdf');
        });
    </script>
Ich wollte die geänderte js-Datei anhängen aber sie ist leider zu groß.

Ist ohnehin, wie schon erwähnt, ein Workaround und sicher auch keine saubere Lösung.

Eine Erklärung, wie man das richtig handhabt, ohne in der js-Datei herum editieren zu müssen, wäre sehr willkommen.
 
I

ich76

Mitglied
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????
 
S

Sclero2004

Mitglied
Das Thema Module insgesamt ist schon ein wenig kompliziert aber in dem Beispiel basic.html kann man ablesen, dass es bereits eine globale Variable gibt, in der jsPDF bereit steht:
Code: 
window.jsPDF = window.jspdf.jsPDF;
D. h. Du brauchst in deinem Skript nur diese Zeile einzufügen und es funktioniert
Code: 
    <script>
        window.jsPDF = window.jspdf.jsPDF;
        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>
Für die Frage ob Du es besser mit Javascript oder PHP machst, ist aber nicht nur entscheidend, was einfacher ist. Bei der Lösung mit Javascript speicherst Du die PDF-Datei lokal auf dem Computer des Benutzers und andere können darauf nicht zugreifen. Willst Du sie auch für andere verfügbar machen, musst Du es entweder gleich mit PHP machen oder die Datei nach der Generierung z. B. mit der fetch-API auf den Server hoch laden.
 
I

ich76

Mitglied
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?
 
I

ich76

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

Sclero2004

Mitglied
Das Beispiel hilft mir leider nicht weiter. Da geht es leider nicht um die Erstellung einer pdf?
Zum Vergrößern anklicken....
Doch, es geht um die Erstellung eines PDF. Leider enthält das Beispiel einiges Drumherum, so dass man den Wald vor lauter Bäumen nicht sieht. Das entscheidende ist diese Zeile:
Code: 
pdf.html(document.body, {
Damit wird aus dem HTML ein PDF erzeugt. Zusätzlich muss man dabei html2canvas.js einbinden. So funktioniert es bei mir:
Code: 
    <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();
            const pdf = new jsPDF();
            pdf.html(document.body, {
                callback: function (pdf) {
                    pdf.save();
                }
            });
        });
    </script>
Erübrigt sich damit deine Frage aus Posting #13?
 
I

ich76

Mitglied
sorry, ich kenne mich noch nicht so aus:
die Konsole sagt folgendes:
1ms html2canvas: html2canvas 1.0.0-alpha.12
 
I

ich76

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

ich76

Mitglied
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>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Werbung:

Neueste Beiträge

Oben