Vue.js PDF Generator in Vuetify UI Using jsPDF and jsPDF-AutoTable Library Full Tutorial For Beginners

Vue.js PDF Generator in Vuetify UI Using jsPDF and jsPDF-AutoTable Library Full Tutorial For Beginners
  • Post author:
  • Post category:Vue
  • Post comments:0 Comments

 

Welcome folks today in this blog post I will be building a simple pdf generator in vue.js using the vuetify ui framework and also we will be using the client side pdf generation libraries such as jspdf and jspdf-autotable for generating the pdf. All the source code will be given below. A step by step youtube video is also shown below.

 

 

 

 

 

Get Started

 

We will be building this vue.js app by including the CDN. For this you only need to create the project folder and inside it you need to create index.html file and copy paste the below code.

 

index.html

 

<!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>
    <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>
    
</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>
<script src="script.js"></script>
</html>

 

 

 

 

 

Now as you can see that we have the vuetify heading and buttons and simply we have these list items which will be converted to pdf using jspdf and jspdf-autotable. Now we will write the script.js

 

READ  Vue.js Dynamic Bootstrap Form Fields Generator From JSON Schema in Browser Using Javascript Full Project For Beginners

script.js

 

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`);
    }
  }
});

 

READ  Vue.js Digital Clock With Current Time Using Moment.js and CSS Bulma Framework in Browser Using Javascript Full Project For Beginners

 

 

 

 

 

Leave a Reply