将DIV导出为PDF

时间:2017-03-30 15:55:35

标签: javascript php html pdf

所以我正在尝试将特定的div导出为PDF文件,而我却惨遭失败...... 这是页面:

<!DOCTYPE HTML>

<html>
	<head>
		<title>Testpage</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>Test</strong></a></h2>
								</header>

							<!-- Content -->
								<section>

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

									<div class="table-wrapper">
										<table id="myTable">
											<thead>
											<tr>
												<th>Time</th>
												<th>Speed</th>
												<th>Meters</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">Test</span>
									<ul>
										<li><a href="#">Test1</a></li>
										<li><a href="test2.php">Test2</a></li>
									</ul>
								</li>
							</ul>
						</nav>

						<!-- Filter -->
						<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="datefrom" id="datefrom" value="" placeholder="Date from" />
                                    </div>
                                    <div class="12u 12u$">
                                        <input type="text" name="dateto" id="dateto" value="" placeholder="Date to" />
                                    </div>
                                    <div class="12u$">
                                        <div class="select-wrapper">
                                            <select name="dropdown" id="dropdown">
                                                <option value="0">- Choose -</option>
                                                <option value="1">All</option>
                                                <option value="2">Speed</option>
                                                <option value="3">Meter</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="12u$">
                                        <ul class="actions">
                                            <li><input type="submit" id="btnSubmit" value="Clickme" 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">Export as PDF</button>
                            </div>
                        </section>

						<!-- Footer -->
                        <footer id="footer">
                            <p> Stuff </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>
                $(document).ready(function() {
                    $('#myTable').DataTable( {
                        "pagingType": "full_numbers"
                    });
                });
            </script>

	</body>
</html>

我正在尝试将<div class="inner" id="inner">中的所有内容都放到PDF文件中,但似乎没有任何效果。我尝试使用jsPDF和html2canvas(html - &gt; img - &gt; pdf),但质量非常糟糕。似乎没有其他工作。 我会很感激我可以用来使它工作的一些指示。

非常感谢, SKÄR

编辑: 这是我在jsPDF推荐之后所包含的内容

            <script src="../assets/jsPDF/jspdf.debug.js"></script>
            <script src="../assets/jsPDF/examples/js/html2canvas.js"></script>

            <script>

                var doc = new jsPDF();

                var specialElementHandlers = {
                    '#header': function(element, renderer){
                        return true;
                    }
                };


                $('#btnExport').click(function(){
                    var html=$("#inner").html();
                    doc.fromHTML(html,0,0, {
                        'width': 500,
                        'elementHandlers': specialElementHandlers
                    });
                    doc.save("Test.pdf");
                });

            </script>

1 个答案:

答案 0 :(得分:1)

试试这个库,它是为客户端PDF生成而构建的。

https://parall.ax/products/jspdf

Here is the github link