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