jsPDF Tutorial to Embed HTML Hyperlinks in PDF Documents in Javascript Full Project For Beginners

jsPDF Tutorial to Embed HTML Hyperlinks in PDF Documents in Javascript Full Project For Beginners

 

 

 

Welcome folks today in this blog post we will be using jspdf library on how to embed html hyperlinks inside pdf documents in javascript. All the source code of the application is given below.

 

 

 

Get Started

 

 

 

In order to get started we need to make a index.html file and copy paste the following code

 

index.html

 

 

<!DOCTYPE html>
<html>
  <head>
    <title>jsPDF Embed HyperLinks in PDF Documents</title>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>
  </head>
  <body>
    
  </body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  
</html>

 

 

So you can see that we have included the cdn of jspdf and jquery. So here we need to make a pdf document inside jspdf

 

Now we will write some static paragraphs and we will have a button and on that button we will bind a button event listener

 

<div id="content">
     <h3>Generate PDF files in client-side JavaScript</h3>

<p>href="https://parall.ax/products/jspdf#"</p>
<p>Or refer to the YouTube video: https://www.youtube.com/watch?v=CnprxD_sJFE<p>
</div>

<div id="editor"></div>

<button id="cmd">Generate PDF</button>

 

See also  Build a Node.js Fill out Forms in PDF Document Using pdf-fill-form Library in Javascript Full Project For Beginners

 

 

 

 

Now we will write the basic javascript code which will be required to embed html hyperlinks inside pdf document

 

 

var doc = new jsPDF();
var specialElementHandlers = {
    '#editor': function (element, renderer) {
        return true;
    }
};

$('#cmd').click(function () {
    doc.fromHTML($('#content').html(), 15, 15, {
        'width': 170,
            'elementHandlers': specialElementHandlers
    });
    doc.save('sample-file.pdf');
});

 

 

 

Full Source Code

 

 

 

<!DOCTYPE html>
<html>
  <head>
    <title>jsPDF Embed HyperLinks in PDF Documents</title>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>
  </head>
  <body>
    <div id="content">
        <h3>Generate PDF files in client-side JavaScript</h3>
   
   <p>href="https://parall.ax/products/jspdf#"</p>
   <p>Or refer to the YouTube video: https://www.youtube.com/watch?v=CnprxD_sJFE<p>
   </div>
   
   <div id="editor"></div>
   
   <button id="cmd">Generate PDF</button>
  </body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script>
      var doc = new jsPDF();
var specialElementHandlers = {
    '#editor': function (element, renderer) {
        return true;
    }
};

$('#cmd').click(function () {
    doc.fromHTML($('#content').html(), 15, 15, {
        'width': 170,
            'elementHandlers': specialElementHandlers
    });
    doc.save('sample-file.pdf');
});
  </script>
</html>

 

 

If you open this index.html file inside the browser you will see the following screenshot

 

 

 

 

Leave a Reply