html2pdf test

large html content with html2pdf

by Hoang Vo

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js"></script>
<script src="https://rawgit.com/eKoopmans/html2pdf/master/vendor/jspdf.min.js"></script>
<script src="https://rawgit.com/eKoopmans/html2pdf/master/vendor/html2canvas.min.js"></script>
<script src="https://rawgit.com/eKoopmans/html2pdf/master/src/html2pdf.js"></script>
<div id="vue-instance">
  <h1>
    This is Test 1
  </h1>
  <ul id='test1'>
    <li v-for="n in 5">
      Hello there
      <div class="html2pdf__page-break"></div>
    </li>
  </ul>
   
   <button @click="convertToPDF('test1')">
    Click
   </button>
   
   <h1>
     This is test 2
   </h1>
   <ul id='test2'>
    <li v-for="n in 25">
      Hello there
      <div class="html2pdf__page-break"></div>
    </li>
  </ul>
  <button @click="convertToPDF('test2')">
    Click
   </button>
</div>

JavaScript

var vm = new Vue({
  el: '#vue-instance',
  
  methods: {
  	convertToPDF: function(test) {
    	var element = document.getElementById(test);
      html2pdf(element, {
        margin:       1,
        filename:     'myfile.pdf',
        image:        { type: 'jpeg', quality: 0.98 },
        html2canvas:  { dpi: 192, letterRendering: true },
        jsPDF:        { unit: 'in', format: 'letter', orientation: 'portrait' }
      });
    }
  }
});