Welcome folks today in this blog post we will be generating dynamic pdf from input form using jspdf in browser using vue.js and javascript. All the full source code of the application is shown below.
Get Started
In order to get started you need to install the below jspdf
library using the below command
npm i jspdf
And after that you need to edit the App.vue
file and copy paste the following code
App.vue
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<template> <input type="text" v-model="name" placeholder="Enter text"/> <button @click="generatePDF">Generate PDF</button> </template> <script> import jspdf from 'jspdf' export default { name: "App", methods:{ generatePDF(){ let doc = new jspdf() doc.text(this.name,10,10) doc.save("output.pdf") } } }; </script> |
As you can see in the above vue component we have got a simple html5 button and a simple input field in the template. And we have binded a onclick listener method called generatePDF()
which we need to define in the javascript.
Inside this method we are first of all importing the jspdf
library and then we are adding the text using the text()
method and inside it we are passing the static text to export to pdf document and then we are giving the x and y coordinates. And then we are saving the pdf document with the filename called output.pdf