HTML2PDF.js Tutorial to Add Headings,Images,Buttons and Hyperlinks in PDF Document in Browser Using Javascript Full Project For Beginners

 

 

 

index.html

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML2PDF Add Image in PDF Document</title>
</head>
<body>
    <div id="profile">
    <h1>Add Image in PDF Document</h1>
    <a target="_blank" href="https://www.google.com">Google</a><br>
    <img src="profile.jpg"/>
    <br>
    <button onclick="pdf()">Download PDF</button>
    </div>
</body>
<script src="https://raw.githack.com/eKoopmans/html2pdf/master/dist/html2pdf.bundle.js"></script>
<script>
    function pdf(){
        var element = document.getElementById('profile');
var opt = {
  margin:       1,
  filename:     'myfile.pdf',
  image:        { type: 'jpeg', quality: 0.98 },
  html2canvas:  { scale: 2 },
  jsPDF:        { unit: 'in', format: 'letter', orientation: 'portrait' }
};

// New Promise-based usage:
html2pdf().set(opt).from(element).save();


    }
</script>
</html>

 

Leave a Reply