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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<!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> |
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