JSFiddle - React, Tailwind, and code Playground

by Geo George

HTML

<script src="http://canvg.github.io/canvg/canvg.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.min.js"></script>
<script src="https://cdn.jsdelivr.net/canvg/1.4.0/canvg.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<body>
<div id='dom-to-print'>
<h3 style="color:red">Test heading</h3>



<div id="loginbox" style="margin-top:50px;" class="mainbox col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">
            <div class="panel panel-info">
                <div class="panel-heading">
                    <div class="panel-title">Sign In</div>
                    <div style="float:right; font-size: 80%; position: relative; top:-10px"><a href="#">Forgot password?</a></div>
                </div>
                </div>
                </div>
</div>
<button id='print-btn'>Start print process</button>
</body>

CSS

body{
  background: red;
}

JavaScript

$('#print-btn').click(()=>{
var pdf = new jsPDF();
pdf.addHTML(document.body,function() {
    pdf.save('web.pdf');
});
})