jsPDF demo

A quick demo of jsPDF

by vgulati28

HTML

<script
	src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js"
	integrity="sha384-NaWTHo/8YCBYJ59830LTz/P4aQZK1sS0SneOgAvhsIl3zBu8r9RevNg5lHCHAuQ/"
	crossorigin="anonymous"></script>
<div id="banner-message">
  <div id="demo">This is a demo of jsPDF</div>
  <p>Click on the button below to export me</p>
  <button>Export to PDF</button>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

JavaScript

// find elements
var banner = $("#banner-message")
var button = $("button")
var demo = $("#demo").text();

// handle click and add class
button.on("click", function(){
  var doc = new jsPDF()
	doc.setFontSize(22);
	doc.setTextColor(0, 0, 255);
	doc.setFont("helvetica");
	doc.setFontStyle("bold");
	doc.text(demo, 105, 10, null, null, 'center');
  doc.save('export.pdf')
})