JSFiddle - React, Tailwind, and code Playground

by Nguyen Hien

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dom-to-image/2.6.0/dom-to-image.min.js"
    integrity="sha256-c9vxcXyAG4paArQG3xk6DjyW/9aHxai2ef9RpMWO44A=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js"></script>

<div id="content2" style="background: #fff;border-bottom: 1px solid #ffffff;">
    <div class="tokenDet"
        style="padding: 15px;border: 1px solid #000;width: 80%;margin: 0 auto;position: relative;overflow: hidden;">
        <div class="title" style="text-align: center; color: green; border-bottom: 1px solid #000;margin-bottom: 15px;">
            <h2>Entrance Exam Hall Ticket</h2>
        </div>
        <div class="parentdiv" style="display: inline-block;width: 100%;position: relative;">
            <div class="innerdiv" style="width: 80%;float: left;">
                <div class="restDet">
                    <div class="div">
                        <div class="label" style="width: 30%;float: left;">
                            <strong>Name</strong>
                        </div>
                        <div class="data" style="width: 70%;display: inline-block;">
                            <span>John Test</span>
                        </div>
                        <div class="label" style="width: 30%;float: left;">
                            <strong>D.O.B.</strong>
                        </div>
                        <div class="data" style="width: 70%;display: inline-block;">
                            <span>17th April, 1995</span>
                        </div>
                        <div class="label" style="width: 30%;float: left;">
                            <strong>Address</strong>
                        </div>
                        <div class="data" style="width: 70%;display: inline-block; color: blue">
                            <span>P.S. Srijan Corporate Park,...

JavaScript

/*
$('#cmd2').click(function() {
  	var options = {
		//'width': 800,
  	};
  	var pdf = new jsPDF('p', 'pt', 'a4');
  	pdf.addHTML($("#content2"), -1, 220, options, function() {
    	pdf.save('admit_card.pdf');
  	});
});
*/
$('#downloadPDF').click(function () {
    domtoimage.toPng(document.getElementById('content2'))
        .then(function (blob) {
            var pdf = new jsPDF('l', 'pt', [$('#content2').width(), $('#content2').height()]);

            pdf.addImage(blob, 'PNG', 0, 0, $('#content2').width(), $('#content2').height());
            pdf.save("test.pdf");

            that.options.api.optionsChanged();
        });
});