JSFiddle - React, Tailwind, and code Playground

by waleedbinahmed

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/html2canvas/0.4.1/html2canvas.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js"></script>
<div class="toolbar no-print">
      <button class="btn btn-info" onclick="window.print()">
        Print Certificate
      </button>
      <button class="btn btn-info" id="downloadPDF" onclick="saveDiv()">Download PDF</button>
    </div>
    <div class="cert-container print-m-0">
      <div id="content2" class="cert">
        <img
          src="https://edgarsrepo.github.io/certificate.png"
          class="cert-bg"
          alt=""
        />
        <div class="cert-content" id="capture">
          <h1 class="other-font">Certificate of Completion</h1>
          <span style="font-size: 30px;">Reginald Bentley</span>
          <br /><br /><br /><br />
          <span class="other-font"
            ><i><b>has completed the</b></i></span
          >
          <br />
          <span style="font-size: 40px;"><b>Azimuth Check</b></span>
          <br />
          <small>(For Soldiers)</small>
          <br /><br /><br /><br />
          <small
            >Completion of the Azimuth Check and review of the Azimuth Check
            recommendations in ArmyFit is worth 1.0 hours in the Electronic
            Based Distance Learning (EBDL) program for USAR and ARNG Soldiers.
            For more information on the EBDL, see your unit training NCO.</small
          >
          <div class="bottom-txt">
            <span>G-1 DAPE-ARR-SF</span>
            <span>Completed on: April 3, 2020</span>
          </div>
        </div>
      </div>
    </div>

CSS

* {
  box-sizing: border-box;
}

@media print{
  .no-print, .no-print *{
    display: none !important;
  } 
  .print-m-0{
    margin: 0 !important;
  }
} 

.btn{
  padding: 10px 17px; 
  border-radius: 3px; 
  background: #f4b71a; 
  border: none; 
  font-size: 12px; 
  margin: 10px 5px;
}

.toolbar{
  background: #333; 
  width: 100vw; 
  position: fixed; 
  left: 0; 
  top: 0; 
  text-align: center;
}

.cert-container {
  margin:65px 0 10px 0; 
  width: 100%; 
  display: flex; 
  justify-content: center;
}

.cert {
  width:800px; 
  height:600px; 
  padding:15px 20px; 
  text-align:center; 
  position: relative; 
  z-index: -1;
}

.cert-bg {
  position: absolute; 
  left: 0px; 
  top: 0; 
  z-index: -1;
  width: 100%;
}

.cert-content {
  width:750px; 
  height:470px; 
  padding:70px 60px 0px 60px; 
  text-align:center;
  font-family: Arial, Helvetica, sans-serif;
  
}

h1 {
  font-size:44px;
}

p {
  font-size:25px;
}

small {
  font-size: 14px;
  line-height: 12px;
}

.bottom-txt {
  padding: 12px 5px; 
  display: flex; 
  justify-content: space-between;
  font-size: 16px;
}

.bottom-txt * {
  white-space: nowrap !important;
}

.other-font {
  font-family: Cambria, Georgia, serif;
  font-style: italic;
}

.ml-215 {
  margin-left: 215px;
}

JavaScript

function saveDiv()
{
    
    html2canvas(document.querySelector("#capture"),{
        allowTaint:true,
        useCORS: false,
        scale: 1
    }).then(canvas => {
    document.body.appendChild(canvas)
    var img = canvas.toDataURL("image/png");
    canvas.style.display="none";
    //var doc = new jsPDF();
    var width = 640
    var height = 480
    var doc = new jsPDF("letter", "px", [640,480]);
    doc.addImage(img, "PNG", -218, 30, 0,0 );
    doc.save(document.getElementById("course_name").value+" Certificate");
});
}