Vue js has become our most favorite front-end JavaScript framework. We always astonished with the great features it provides. The task of PDF generation becomes really easy with Vue JS. In this Vue JS PDF generate tutorial we will look at the entire process to generate PDF with Vue JS.

Vue JS PDF generate

First of all, we will create a new project as follows. If you are new to Vue then we suggest you check out Vue JS tutorial for beginners first.

vue init webpack vuepdf

We need a library called jsPDF for this tutorial. So once the project directory is ready, move inside of it and save the library as follows.

npm i jspdf --save

So the above command will save the library as a dependency. Now we are ready to move further.

Creating the template

We have installed the router in our project. So we will directly move inside of the components folder and create a new component called Home.

Now let’s add the markup for our component as follows.


<template>
	<div id="home" class="container mt-5">
		<div class="row justify-content-center">
			<div class="col-md-6">
				<div class="card card-body">
					<div class="form-group">
						<input type="text" id="name" v-model="name" class="form-control" placeholder="Enter name here">
					</div>
					<button class="btn btn-primary pl-5 pr-5" @click="download">Download PDF</button>
				</div>
			</div>
		</div>
	</div>
</template>

As you can see we have used bootstrap classes in the above markup. You can simply add the bootstrap CDN within the index HTML file.

The above markup just contains an input field and a button. The input field is bonded with the data attribute name. On the other side, the button is also bonded with a click event.

Creating the script

Now as our template part is ready so let’s move to the script part.

First of all, before everything we need to import the jsPDF library as follows.

import jsPDF from 'jsPDF'

Now after that, we need to write code for our data and methods.

export default {
	name: 'home',
	data() {
		return {
			name: ''
		}
	},
	methods: {
		download () { }
	}
}

As you can see we have created a string variable called name. It’s the one that’s bonded with our input field.

Later that we have initialized an empty method called download. This is the place where we will add code to write and download our PDF file.

let pdfName = 'test'; 
var doc = new jsPDF();
doc.text(this.name, 10, 10);
doc.save(pdfName + '.pdf');

A simple 4 lines of code will magically create the PDF file and write the contents and make it available for you to download. Now let’s see what each line of code does.

In the first line, we have named the PDF file. Later that we have initialized the imported jsPDF object. Next, we have used the text method to write the name inside of our form field. This method can accept a few other parameters to add spacing and font size.

Finally, the save method will download the file.

So that’s all now let’s move to the final part of our Vue js PDF generate tutorial.

Modifying the router

Once the component is ready we need to add it to the router. So that we can display it on our specified URL. We would like to display it in the root URL. We can do it as follows.

First of all, import the Home component from the components directory.

import Home from '@/components/Home'

Now let’s add it to our routes array as follows.

routes: [
	{ path: '/', name: 'Home', component: Home }
]

So finally run the command below and go to localhost:8080.

npm run dev

We have come to the end of our Vue JS PDF to generate a tutorial. Hope you have liked this one. This one is quite shorter but informative so don’t forget to share with your buddy developers.