Javascript PDFMake.js Example to Generate PDF Document Using Dynamic Text inside Textarea in Browser

Welcome folks today in this blog post we will be using pdfmake.js library to generate the pdf document using dynamic text inside textarea widget in browser using 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>
<head>
  <title>Dynamic PDF Generation</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.3/pdfmake.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.3/vfs_fonts.js"></script>

</head>
<body>
  <h1>Dynamic PDF Generation</h1>
  <textarea id="textInput" rows="10" cols="50"></textarea>
  <button onclick="generatePDF()">Generate PDF</button>

  <script>
   function generatePDF() {
  const text = document.getElementById('textInput').value;



  // Create a document definition
  const docDefinition = {
    content: [
      { text: text, fontSize: 12, margin: [0, 10, 0, 0] }
    ]
  };

  // Generate the PDF
  const pdfDocGenerator = pdfMake.createPdf(docDefinition);

  // Download the PDF
  pdfDocGenerator.download('dynamic_pdf.pdf');
}

  </script>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Dynamic PDF Generation</title>

</head>

<body>

<h1>Dynamic PDF Generation</h1>

<button onclick="generatePDF()">Generate PDF</button>

function generatePDF() {

const text = document.getElementById('textInput').value;

// Create a document definition

const docDefinition = {

content: [

{ text: text, fontSize: 12, margin: [0, 10, 0, 0] }

]

};

// Generate the PDF

const pdfDocGenerator = pdfMake.createPdf(docDefinition);

// Download the PDF

pdfDocGenerator.download('dynamic_pdf.pdf');

}

</script>

</body>

</html>

As you can see we are including the cdn of the pdfmake.js library at the top and also we have the textarea where user can enter the text and then we are exporting it to pdf document