JavaScript DIV zu PDF konvertieren

cardinal

Lt. Junior Grade
Registriert
Mai 2010
Beiträge
467
Nabend Community,

ich versuche nun schon seit gestern eine div in eine PDF zu bekommen. Leider scheitere ich durchweg und ich habe auch keine weiteren Ideen mehr wie mein Problem zu lösen ist. Hier erstmal die Seite:

PHP:
<!DOCTYPE HTML>

<html>
	<head>
		<title>Ausgabe_Test</title>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
		<!--[if lte IE 8]><script src="../assets/js/ie/html5shiv.js"></script><![endif]-->
        <link rel="stylesheet" href="../assets/css/jquery.dataTable.min.css" />
		<link rel="stylesheet" href="../assets/css/main.css" />
        <link rel="stylesheet" href="../assets/css/toastr.css" />
        <link rel="stylesheet" href="../assets/css/chart.css" />
		<!--[if lte IE 9]><link rel="stylesheet" href="../assets/css/ie9.css" /><![endif]-->
		<!--[if lte IE 8]><link rel="stylesheet" href="../assets/css/ie8.css" /><![endif]-->
	</head>
	<body>

		<!-- Wrapper -->
			<div id="wrapper">

				<!-- Main -->
					<div id="main">
						<div class="inner" id="inner">

							<!-- Header -->
								<header id="header">
									<h2><a href="#" class="logo"><strong>Ausgabe_Test</strong></a></h2>
								</header>

							<!-- Content -->
								<section>

									<!-- Table -->
									<h3>Tabelle</h3>

									<div class="table-wrapper" id="zzz">
										<table id="myTable">
											<thead>
											<tr>
												<th>Zeit</th>
												<th>Geschwindigkeit</th>
												<th>Meter</th>
											</tr>
											</thead>
											<tbody>

												<?php
													require_once ('showData.php');
												?>
								</section>

						</div>
					</div>

				<!-- Sidebar -->
				<div id="sidebar">
					<div class="inner">

						<!-- Menü -->
						<nav id="menu">
							<header class="major">
								<h2>Menü</h2>
							</header>
							<ul>
								<li><a href="../index.php">Home</a></li>
								<li>
									<span class="opener">Menü</span>
									<ul>
										<li><a href="#">Seite1</a></li>
										<li><a href="seite2.php">V_9833</a></li>
									</ul>
								</li>
								<li><a href="../settings/settings.php">Einstellungen</a></li>
							</ul>
						</nav>

						<!-- Filtermenü -->
						<section>
							<header class="major">
								<h2>Filter</h2>
							</header>
                            <form method="post" id="submitdata" name="submitdata">
                                <div class="row uniform">
                                    <div class="12u 12u$">
                                        <input type="text" name="datumvon" id="datumvon" value="" placeholder="Datum von" />
                                    </div>
                                    <div class="12u 12u$">
                                        <input type="text" name="datumbis" id="datumbis" value="" placeholder="Datum bis" />
                                    </div>
                                    <div class="12u$">
                                        <div class="select-wrapper">
                                            <select name="dropdown" id="dropdown">
                                                <option value="0">- Auswahl -</option>
                                                <option value="1">Alles</option>
                                                <option value="2">Geschwindigkeit</option>
                                                <option value="3">Meter</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="12u$">
                                        <ul class="actions">
                                            <li><input type="submit" id="btnSubmit" value="Übernehmen" class="special" /></li>
                                            <li><input type="reset" value="Reset" /></li>
                                        </ul>
                                    </div>
                                </div>
                            </form>
						</section>

                        <!-- Exportmenü -->
                        <section>
                            <header class="major">
                                <h2>Export</h2>
                            </header>
                            <div class="12u 12u$">
                                <button id="btnExport" class="button special icon fa-file-pdf-o">Als PDF exportieren</button>
                            </div>
                        </section>

						<!-- Footer -->
                        <footer id="footer">
                            <p>Footer</p>
                        </footer>

					</div>
				</div>

			</div>

		<!-- Scripts -->
			<script src="../assets/js/jquery.min.js"></script>
			<script src="../assets/js/skel.min.js"></script>
			<script src="../assets/js/util.js"></script>
            <script src="../assets/js/jquery.dataTables.min.js"></script>
			<!--[if lte IE 8]><script src="../assets/js/ie/respond.min.js"></script><![endif]-->
			<script src="../assets/js/main.js"></script>
            <script src="../assets/js/toastr.js"></script>
            <script src="../assets/js/submitData.js"></script>
            <script src="../assets/js/jspdf.min.js"></script>
            <script src="../assets/js/html2canvas.min.js"></script>

            <script>

                (function() {
                    var
                        form = $('#inner'),
                        cache_width = form.width(),
                        a4 = [595.28, 841.89]; // for a4 size paper width and height

                    $('#btnExport').on('click', function() {
                        $('body').scrollTop(0);
                        createPDF();
                    });
                    //create pdf
                    function createPDF() {
                        getCanvas().then(function(canvas) {
                            var
                                img = canvas.toDataURL("image/png"),
                                doc = new jsPDF({
                                    unit: 'px',
                                    format: 'a4'
                                });
                            doc.addImage(img, 'JPEG', 20, 20);
                            doc.save('test.pdf');
                            form.width(cache_width);
                        });
                    }

                    // create canvas object
                    function getCanvas() {
                        form.width((a4[0] * 1.33333) - 80).css('max-width', 'none');
                        return html2canvas(form, {
                            imageTimeout: 10,
                            removeContainer: true
                        });
                    }

                }());

            </script>

            <script>
                $(document).ready(function() {
                    $('#myTable').DataTable( {
                        "pagingType": "full_numbers"
                    });
                });
            </script>

	</body>
</html>

Je nach Auswahl der Form wird die Anzeige in showData.php angepasst. Dort werden Daten aus einer DB verarbeitet und auch als Google-Charts ausgegeben. Ich möchte einfach nur, dass beim Klicken auf den Exportbutton diese Anzeige inklusive Tabelle in eine PDF konvertiert wird. Funktioniert hat bisher nichts richtig. Der Javascript-Block am Ende ist mein letzter Versuch. Dort kommt zwar eine PDF bei zustande, jedoch ist die Qualität recht bescheiden und es ist auch nicht die ganze Anzeige drauf.

Über Hilfe würde ich mich wirklich freune ;P

Danke,
Lui
 
Danke für die Antwort :)
Ich hatte es schon mit jsPDF versucht, leider übernimmt es keinen style also css und mir werden die reinen Daten ausgegeben. Das kann ich so leider nicht verwenden.

Die einzige Lösung, die mir jetzt noch einfällt, ist ein Umweg: HTML -> IMG -> PDF
Aber mal schauen ob das klappt ;P


EDIT:
PHP:
        <script>

            function genPDF(){
                html2canvas(document.body, {
                    onrendered: function (canvas){

                        var img = canvas.toDataURL("image/png");
                        var doc = new jspdf();
                        doc.addImage(img, 'JPEG',0,0);
                        doc.save('test.pdf');
                    }
                });
            }

        </script>

Das ist mein bisheriger Stand. html2canvas erstellt das Image, das wird ins PDF gepackt und ausgegeben. Leider wird das Bild stark vergrößert und so nur als Ausschnitt angegeben.

Irgendjemand eine Idee wie man dies anpassen kann?
 
Zuletzt bearbeitet:
Zurück
Oben