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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<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> |
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