tableexport.jquery.plugin
Version:
233 lines (206 loc) • 6.57 kB
HTML
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/0.6.0/pure-min.css">-->
<link rel="stylesheet" href="libs/pure-min.css">
<!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/0.6.0/grids-responsive-min.css">-->
<link rel="stylesheet" href="libs/grids-responsive-min.css">
<title>AutoTable sample</title>
<style>
* {
box-sizing: border-box;
}
html, body {
height: 100%;
overflow: hidden;
}
.navbar {
position: absolute;
top: 0;
left: 0;
right: 0;
background: #e74c3c;
border-bottom: 5px solid #c0392b;
height: 50px;
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
padding: 0 10px;
}
.navbar h1 {
font-size: 20px;
color: #fff;
}
.menu {
padding: 0;
list-style: none;
}
.menu li {
vertical-align: top;
}
.menu li a {
text-decoration: none;
color: #fff;
font-weight: bold;
font-family: sans-serif;
padding: 10px 0;
line-height: 25px;
}
.menu li a:hover {
font-style: italic;
}
#panel {
background: #141f2b;
padding: 10px;
height: 100%;
}
#panel .editor {
background: #fff;
}
#wrapper {
overflow: hidden;
height: 100%;
background: rgba(193, 193, 193, 1);
}
#output {
width: 100%;
height: 100%;
background: rgba(193, 193, 193, 1);
}
</style>
</head>
<body>
<header class="navbar">
<h1>
AutoTable - Generate PDF tables and lists (jsPDF plugin)
<!--<iframe style="display: inline; vertical-align: middle; margin-left: 10px;"
src="https://ghbtns.com/github-btn.html?user=simonbengtsson&repo=jsPDF-AutoTable&type=star&count=true&size=medium"
frameborder="0" scrolling="0" width="160px" height="20px"></iframe>-->
</h1>
</header>
<div class="pure-g" style="padding-top: 50px; height: 100%;">
<div id="panel" class="pure-u-1 pure-u-md-1-5">
<ul class="menu">
<li><a href="#">Default</a></li>
<li><a href="#minimal">Minimal</a></li>
<li><a href="#long">Long text</a></li>
<li><a href="#content">With content</a></li>
<li><a href="#multiple">Multiple tables</a></li>
<li><a href="#html">From html</a></li>
<li><a href="#header-footer">Header and footer</a></li>
<li><a href="#horizontal">Horizontal headers</a></li>
<li><a href="#spans">Rowspan and colspan</a></li>
<li><a href="#themes">Themes</a></li>
<li><a href="#custom">Custom style</a></li>
</ul>
<button id="download-btn" class="pure-button">Download PDF</button>
<!--<div class="editor">
<pre><code class="javascript">var test = "hey!";</code></pre></div>-->
</div>
<div id="wrapper" class="pure-u-1 pure-u-md-4-5">
<iframe id="output"></iframe>
</div>
</div>
<table id="basic-table" style="display: none;">
<thead>
<tr>
<th>ID</th>
<th>First name</th>
<th>Last name</th>
<th>Email</th>
<th>Country</th>
<th>IP-address</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Donna</td>
<td>Moore</td>
<td>dmoore0@furl.net</td>
<td>China</td>
<td>211.56.242.221</td>
</tr>
<tr>
<td>2</td>
<td>Janice</td>
<td>Henry</td>
<td>jhenry1@theatlantic.com</td>
<td>Ukraine</td>
<td>38.36.7.199</td>
</tr>
<tr>
<td>3</td>
<td>Ruth</td>
<td>Wells</td>
<td>rwells2@constantcontact.com</td>
<td>Trinidad and Tobago</td>
<td>19.162.133.184</td>
</tr>
<tr>
<td>4</td>
<td>Jason</td>
<td>Ray</td>
<td>jray3@psu.edu</td>
<td>Brazil</td>
<td>10.68.11.42</td>
</tr>
<tr>
<td>5</td>
<td>Jane</td>
<td>Stephens</td>
<td>jstephens4@go.com</td>
<td>United States</td>
<td>47.32.129.71</td>
</tr>
<tr>
<td>6</td>
<td>Adam</td>
<td>Nichols</td>
<td>anichols5@com.com</td>
<td>Canada</td>
<td>18.186.38.37</td>
</tr>
</tbody>
</table>
<!-- All major versions (0.9, 1.0 and 1.1) should work. In my experience 1.0 is the best one right now, but
<!-- for extended IE support 0.9 would probably be the easiest to use. 1.1 is a bit buggy as of 26th of June 2015.
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.1.135/jspdf.min.js"></script>-->
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>-->
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/0.9.0/jspdf.min.js"></script>-->
<script src="libs/jspdf.min.js"></script>-->
<script src="../dist/jspdf.plugin.autotable.js"></script>
<!--<script src="https://cdn.jsdelivr.net/faker.js/2.1.5/faker.min.js"></script>-->
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/highlight.min.js"></script>-->
<script src="libs/faker.min.js"></script>
<script src="examples.js"></script>
<!-- Some scripts to make the examples work nicely -->
<script>
//hljs.initHighlightingOnLoad();
window.onhashchange = function () {
update();
};
document.getElementById('download-btn').onclick = function () {
update(true);
};
function update(shouldDownload) {
shouldDownload = shouldDownload || false;
var funcStr = window.location.hash.replace(/#/g, '');
var example = examples[funcStr], doc = null;
if (typeof example === 'function') {
doc = example();
} else {
doc = examples.auto();
}
if (shouldDownload) {
doc.save('table.pdf');
} else {
document.getElementById("output").src = doc.output('datauristring');
}
}
update();
</script>
</body>
</html>