Vue.js jsPDF Autotable Tutorial to Export TODOS List to Table in PDF Document Using Javascript Full Project For Beginners

 

 

Source Code

 

 

 

index.html

 

 

<div id="app">
  <button @click="exportPDF">Export PDF</button>
  <ul>
    <li v-for="todo in todos">
      {{ todo.title }}</li>
  </ul>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.15/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.4.1/jspdf.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/2.3.4/jspdf.plugin.autotable.min.js"></script>

 

 

script.js

 

 

new Vue({
  el: '#app',
  data(){
    return {
      todos: [
        {title: 'todo 1', description: 'description 1'},
        {title: 'todo 2', description: 'description2'},
        {title: 'todo 3', description: 'description 3'},
        {title: 'todo 4', description: 'description 4'},
        {title: 'todo 5', description: 'description 5'}
      ]
    }
  },
  methods: {
    exportPDF() {
      var vm = this
      var columns = [
        {title: "Title", dataKey: "title"},
        {title: "Description", dataKey: "description"}
      ];
      var doc = new jsPDF('p', 'pt');
      doc.text('To Do List', 40, 40);
      doc.autoTable(columns, vm.todos, {
        margin: {top: 60},
      });
      doc.save('todos.pdf');
    }
  }
})

 

 

 

 

Leave a Reply