Vue.js jsPDF Project to Export HTML to PDF Document in Browser Using Javascript

Welcome folks today in this blog post we will be exporting html to pdf document using jspdf library and vue.js in 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>
  <button @click="generatePDF">Generate PDF</button>
</template>

<script>
import jspdf from 'jspdf'
export default {
  name: "App",
  methods:{
    generatePDF(){
      let doc = new jspdf()
      doc.text("hello world",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("hello world",10,10)

doc.save("output.pdf")

}

};

</script>

As you can see in the above vue component we have got a simple html5 button 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