<html lang="en" class=""><head>
<meta charset="UTF-8">
<title>Demo</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<style class="INLINE_PEN_STYLESHEET_ID">
body {
padding: 10px;
}
* {
background-color: #fff;
}
h1 {
margin-top: 0;
}
h2 {
margin-top: 40px;
}
.form {
padding: 20px;
}
.form .title {
margin-bottom: 60px;
}
.form .row:nth-child(even) {
padding-bottom: 20px;
margin-bottom: 30px;
border-bottom: #ccc thin solid;
}
</style>
</head>
<body>
<div class="container form" id="form">
<div class="row title hidden-print">
<div class="col-sm-6">
<h1>HTML to PDF</h1>
</div>
<div class="col-sm-6 text-right"><a class="btn btn-success" id="exportForm">Export page</a>
</div>
</div>
<div id="first-page">
<div class="row title">
<div class="col-sm-12">
<h2>First Page</h2>
</div>
</div>
<div class="row">
<div class="col-sm-3 form-group">
<label>First Name</label>
<input class="form-control">
</div>
<div class="col-sm-3 form-group">
<label>Last Name</label>
<input class="form-control">
</div>
<div class="col-sm-3 form-group">
<label>Birthday</label>
<input class="form-control">
</div>
<div class="col-sm-3 form-group">
<label>Email Address</label>
<input class="form-control">
</div>
</div>
<div class="row hidden-print">
<div class="col-sm-12 form-group">
<label>Bio</label>
<textarea class="form-control"></textarea>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<script id="INLINE_PEN_JS_ID">
$('#exportForm').click(function () {
var pdf = new jsPDF('a', 'mm', 'a4');
var firstPage;
html2canvas($('#first-page'), {
onrendered: function (canvas) {
firstPage = canvas.toDataURL('image/jpeg', 1.0);
} });
setTimeout(function () {
pdf.addImage(firstPage, 'JPEG', 5, 5, 200, 0);
pdf.save("export.pdf");
}, 150);
});
</script>
</body>
</html>
Leave a Reply