VueJS w/ jsPDF AutoTable autoTableHtmlToJson

A VueJS Project

by Lucas Fontes Gaspareto

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/2.3.2/jspdf.plugin.autotable.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>

<div id="app">
  <table ref="table">
    <thead>
      <tr>
        <th>Id</th>
        <th>Text</th>
        <th>Today</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in table">
        <td>{{item.id}}</td>
        <td>{{item.text}}</td>
        <td>{{item.today}}</td>
      </tr>
    </tbody>
  </table>
  <button @click="pdf">Gerar PDF</button>
</div>

JavaScript

var app = new Vue({
	el: '#app',
  data: function() {
  	return {
    	table: [{
      	id: 1, text: 'teste 1', today: new Date()
      }, {
      	id: 3, text: 'teste 3', today: new Date()
      }, {
      	id: 2, text: 'teste 2', today: new Date()
      }]
    }
  },
  methods: {
  	pdf: function() {
      var doc = new jsPDF('p', 'pt');
      var data = doc.autoTableHtmlToJson(this.$refs.table);
      doc.autoTable(data.columns, data.rows);
      doc.save('table.pdf');
    }
  }
})