jspdf-autotable
Version:
Generate pdf tables with javascript (jsPDF plugin)
266 lines (235 loc) • 7.46 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%;
}
#wrapper {
overflow: hidden;
height: 100%;
background: rgba(193, 193, 193, 1);
}
#output {
width: 100%;
height: 100%;
background: rgba(193, 193, 193, 1);
}
.table {
font-size: 14px;
}
</style>
</head>
<body>
<header class="navbar">
<h1>AutoTable - Generate PDF tables and lists (jsPDF plugin)</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="#">Basic</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="#header-footer">Header and footer</a></li>
<li><a href="#defaults">Default options</a></li>
<li><a href="#colstyles">Column styles</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>-->
<object id="output" type="application/pdf">
<p>It appears you don't have PDF support in this web browser. <a href="#" id="download-link">Click here to download the PDF</a>.</p>
</object>
</div>
</div>
<style>
td, th {
border: solid 1px #777;
padding: 5px;
text-align: left;
}
</style>
<table class="table pure-table" id="basic-table" style="display: none;">
<thead>
<tr>
<th>ID</th>
<th colspan="2">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 style="background: rgb(231, 76, 60); color: white;">
<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<br>18.123.22.82</td>
</tr>
</tbody>
</table>
<!-- Supported versions: 1.0.272, 1.1.135, 1.2.61, 1.3.5, 1.4.1 -->
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.1.135/jspdf.debug.js"></script>-->
<script src="libs/jspdf.debug.js"></script>
<script src="libs/faker.min.js"></script>
<script src="libs/jspdf.plugin.autotable.js"></script>
<script src="examples.js"></script>
<!-- Some scripts to make the examples work nicely -->
<script>
window.onhashchange = function () {
update();
};
document.getElementById('download-btn').onclick = function () {
update(true);
};
document.getElementById('download-link').onclick = function () {
update(true);
};
function update(shouldDownload) {
var funcStr = window.location.hash.replace(/#/g, '') || 'basic';
var doc = examples[funcStr]();
doc.setProperties({
title: 'Example: ' + funcStr,
subject: 'A jspdf-autotable example pdf (' + funcStr + ')'
});
if (shouldDownload) {
doc.save('table.pdf');
} else {
//document.getElementById("output").src = doc.output('datauristring');
document.getElementById("output").data = doc.output('datauristring');
}
}
var base64Img, coinBase64Img;
imgToBase64('document.jpg', function(base64) {
base64Img = base64;
imgToBase64('coin.png', function(base64) {
coinBase64Img = base64;
update();
});
});
// You could either use a function similar to this or pre convert an image with for example http://dopiaza.org/tools/datauri
// https://stackoverflow.com/a/20285053/827047
function imgToBase64(src, callback) {
var outputFormat = src.substr(-3) === 'png' ? 'image/png' : 'image/jpeg';
var img = new Image();
img.crossOrigin = 'Anonymous';
img.onload = function() {
var canvas = document.createElement('CANVAS');
var ctx = canvas.getContext('2d');
var dataURL;
canvas.height = this.naturalHeight;
canvas.width = this.naturalWidth;
ctx.drawImage(this, 0, 0);
dataURL = canvas.toDataURL(outputFormat);
callback(dataURL);
};
img.src = src;
if (img.complete || img.complete === undefined) {
img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
img.src = src;
}
}
</script>
</body>
</html>