jsPDF Tutorial to Add Local & Static Image in PDF Document Using Javascript

Welcome folks today in this blog post we will be adding the local static image in pdf document using jspdf library in javascript. All the full source code of the application is shown below.

Get Started

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

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>Add Acroform Text Field in PDF Document</title>
</head>

<body>

</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>
<script>
  var doc = new jsPDF()

  let img = new Image()

  img.src = "image.png"

  doc.addImage(img,10,10)

  doc.save("output.pdf")
</script>

</html>

<!DOCTYPE html>

<head>

<title>Add Acroform Text Field in PDF Document</title>

</head>

<body>

</body>

var doc = new jsPDF()

let img = new Image()

img.src = "image.png"

doc.addImage(img,10,10)

doc.save("output.pdf")

</script>

</html>

As you can see we are including the jspdf library cdn and then we are including a external local image file using the image constructor and then we are adding the image inside the pdf file using the addImage() method and here we are providing the x and y coordinates. And then we are saving the pdf document using the save() method