Generating PDF From HTML with VueJS & jsPDF – Harshad Chopra

Generating PDF From HTML with VueJS & jsPDF – Harshad Chopra

In this tutorial we will be making an application that will be generating pdf from html with VUEJS & jsPDF. All the source code of the application is given below and understand it and extend the app with your code as well. The screenshot of the application is given below.

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.js

new Vue({
  el: '#app',
  data(){
    return{
      todos: [
        {
          title: 'title 1',
          description: 'description 1'
        },
        {
          title: 'title 2',
          description: 'description 2'
        },
        {
          title: 'title 3',
          description: 'description 3'
        },
        {
          title: 'title 4',
          description: 'description 4'
        },
        {
          title: 'title 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('hello', 20, 20)
      doc.autoTable(columns, vm.todos );
      doc.save('todos.pdf');
    }
  }
})

Leave a Reply

Close Menu