jsPDF - HTML to pdf hidden text

by bangiev

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<div id="inputHtml" style="width: 400px;">
  <h2 style="text-align: left">
    <span style="font-size: 24px;">What is Lorem Ipsum?</span>
  </h2>
  <p style="text-align: justify">
    <strong style="background-color: rgb(255, 255, 255); font-size: 14px;">
      Lorem Ipsum
    </strong>
    <span style=" background-color: rgb(255, 255, 255);">
      is simply dummy text of the printing and typesetting industry. Lorem Ipsum
      has been the industry&#39;s standard dummy text ever since the 1500s, when
      an unknown printer took a galley of type and scrambled it to make a type
      specimen book.
    </span>
  </p>
</div>
<br>

<div id="generate-pdf-btn">
  <span>Generate pdf</span>
</div>

CSS

#generate-pdf-btn {
  background: red;
  display: inline-block;
  padding: 10px;
  border-radius: 8px;
  cursor: pointer;
}

JavaScript

var btn = document.querySelector('#generate-pdf-btn');
btn.addEventListener('click', generatePDF, false);

function generatePDF() {
	var inputHtml = document.getElementById('inputHtml');
  var jsPDF = window.jspdf.jsPDF;
  var doc = new jsPDF('portrait', 'px', 'a4');
 
  doc.html(inputHtml, {
  	autoPaging: 'text',
    margin: [10, 10, 10, 10],
    callback: function (doc) {
      doc.save("file.pdf");
    }
  });
}