jsPDF Vue.js Project to Generate Dynamic PDF from Input Form in Browser Using Javascript

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

<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>

<button @click="generatePDF">Generate PDF</button>

</template>

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