Welcome folks today in this blog post we will be building a pdf generator in vue.js using vuetify ui using jspdf and jspdf-autotable library in javascript. All the full source code of the application is shown below.
Get Started
In order to get started yo need to make a index.html file and copy paste the following code
index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vuetify/2.3.10/vuetify.css" /> </head> <body> </body> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.12/vue.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/vuetify/2.3.10/vuetify.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.6/jspdf.plugin.autotable.js"></script> </html> |
As you can see we are including the jspdf and jspdf-autotable library cdn. And also we are including the vue.js and vuetify library cdn in the above html code
Now we need to add the basic html widgets including a simple heading , paragraph and a unordered list of items.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<div id="app"> <v-app> <v-container> <v-row> <v-col> <h1>{{ heading }}</h1> <v-btn color='black' class="white--text" @click='generatePDF'>Generate PDF</v-btn> </v-col> </v-row> <v-row> <v-col> <ul> <li v-for='item in items'>{{ item.title }} - {{ item.body }}</li> </ul> </v-col> </v-row> </v-container> </v-app> </div> |
As you can see we are having a vue.js container inside the above html code. We are displaying a dynamic heading using the double {{}} basically this helps in rendering out dynamic variables in html5 template. And then we have a simple button to simply export the html to pdf document. And we have given the onclick listener to button. We will be executing the function generatePDF(). And inside the list of items we are having a for loop inside this loop we are iterating over all the items. And printing out the title and the body.
And now we need to write the vue.js code
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 |
new Vue({ el: "#app", vuetify: new Vuetify(), data() { return { heading: "Sample PDF Generator", moreText: [ "This is another few sentences of text to look at it.", "Just testing the paragraphs to see how they format.", "jsPDF likes arrays for sentences.", "Do paragraphs wrap properly?", "Yes, they do!", "What does it look like?", "Not bad at all." ], items: [ { title: "Item 1", body: "I am item 1 body text" }, { title: "Item 2", body: "I am item 2 body text" }, { title: "Item 3", body: "I am item 3 body text" }, { title: "Item 4", body: "I am item 4 body text" } ] }; }, methods: { generatePDF() { const columns = [ { title: "Title", dataKey: "title" }, { title: "Body", dataKey: "body" } ]; const doc = new jsPDF({ orientation: "portrait", unit: "in", format: "letter" }); // text is placed using x, y coordinates doc.setFontSize(16).text(this.heading, 0.5, 1.0); // create a line under heading doc.setLineWidth(0.01).line(0.5, 1.1, 8.0, 1.1); // Using autoTable plugin doc.autoTable({ columns, body: this.items, margin: { left: 0.5, top: 1.25 } }); // Using array of sentences doc .setFont("helvetica") .setFontSize(12) .text(this.moreText, 0.5, 3.5, { align: "left", maxWidth: "7.5" }); // Creating footer and saving file doc .setFont("times") .setFontSize(11) .setFontStyle("italic") .setTextColor(0, 0, 255) .text( "This is a simple footer located .5 inches from page bottom", 0.5, doc.internal.pageSize.height - 0.5 ) .save(`${this.heading}.pdf`); } } }); |
As you can see we are having the vuetify constructor and inside it we are targeting the root element having the id #app. And after that we are having the data. Inside it we have the heading,title. And also we have declared an array of items. And inside the methods section we are defining the method generatePDF() where we are exporting the html to pdf document using jspdf and jspdf-autotable. And we are setting the custom fonts and also setting the custom color. And then saving the pdf using the save() method.
