Jspdf error with Vuejs

Question

I’m having a problem trying to use Jspdf with Vuejs. I picked up a tutorial on the internet (this one) which shows how to print all the contents of a div (for it was not succeeding. However, in the test works perfectly, in mine, even if able to adapt, the PDF comes all blank, someone can help?

methods: {
   GerarPdf(){
        let source      = $('#div')
        let cache_width = source.width()
        let a4          = [595.28, 990.89]

        let canvasImage = ''
        let winHeight   = a4[1]
        let formHeight  = source.height()
        let formWidth   = source.width()

        let imagePieces = []

        imagePieces = [];
        imagePieces.length = 0;

        source.width((a4[0] * 1.33333) - 80).css('max-width', 'none');

        return html2canvas(source, {
            imageTimeout: 2000,
            removeContainer: true
        })
        .then(canvas => {
          console.log(canvas)
          canvasImage = new Image();
          canvasImage.src = canvas.toDataURL("image/png");
          let totalImgs = Math.round(formHeight/winHeight);

          for(let i = 0; i < totalImgs; i++) {
              let canvas = document.createElement('canvas'),
                  ctx = canvas.getContext('2d');
              canvas.width = formWidth;
              canvas.height = winHeight;
              ctx.drawImage(canvasImage, 0, i * winHeight, formWidth, winHeight, 0, 0, canvas.width, canvas.height);
              imagePieces.push(canvas.toDataURL("image/png"));
          }
          console.log(imagePieces.length);
          let totalPieces = imagePieces.length - 1;
          let doc = new jsPDF({
              unit: 'px',
              format: 'a4'
          });
          imagePieces.forEach(function(img){
              doc.addImage(img, 'JPEG', 20, 40);
              if(totalPieces)
                  doc.addPage();
              totalPieces--;
          });
          doc.save('techumber-html-to-pdf.pdf');
          //source.width(cache_width);
        })
      }
}

Answer 1

Hello,

I didn’t "debug" your code to understand where the error happens, however, I’ve used jsPDF with jsPDF-AutoTable And I believe that this can serve what you need. Assuming you already have a notion of JavaScript and VueJS, follows below the code.

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 columns = ["ID", "Text", "Today"];
      var rows = this.table.map(function(data) {
      	return [data.id, data.text, data.today];
      });
      
      // Only pt supported (not mm or in)
      var doc = new jsPDF('p', 'pt');
      doc.autoTable(columns, rows);
      doc.save('table.pdf');
    }
  }
})

<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>
    <li v-for="item in table">{{item.id}} - {{item.text}} : {{item.today}}</li>
  </table>
  <button @click="pdf">Gerar PDF</button>
</div>

There is not much secret in this script. The function autoTable have 2 parameters, the first is a Array with the name of the columns and the second is a Array bidimenssional where each row has an array of values.

Any doubts we are available, so I suggest you read the instructions before anything, hug.

jsPDF

jsPDF-Autotable

Edit

Example using the HTML element table and the method autoTableHtmlToJson link jsFiddle

Answer 2

After a lot of trying, I managed to solve my case, I’ll leave the code here for those who have the same problem as me. I thank those who tried to help me.

$('body').css('overflow', 'visible')
            $('#app').css('overflow', 'visible')
            $('#pdfCarta').css('overflow', 'visible')
            $('#pdfCarta').css('position', 'initial')
            let a4          = [595.28, 990.89]
            $('#pdfCarta').width((595.28 * 1.33333) - 80).css('max-width', 'none');
            //$('#pdfCarta').css('transform', 'scale(2)');
            let useHeight = $('#pdfCarta').prop('scrollHeight');
            //alert(useHeight)

            let winHeight   = a4[1]
            let imagePieces = []
            let canvasImage = ''
            let formHeight  = $('#pdfCarta').height()
            let formWidth   = $('#pdfCarta').width()
            let source = document.getElementById('pdfCarta')

            imagePieces = [];
            imagePieces.length = 0;


            setTimeout(function(){
                html2canvas($('#pdfCarta')[0],{height: useHeight, useCORS: true, allowTaint: true, onrendered: canvas => {
                    canvasImage = new Image();
                    canvasImage.src = canvas.toDataURL("image/png", 0.92);
                    //window.open(canvas.toDataURL())
                    let doc = new jsPDF('p', 'pt', 'a4')

                   for (var i = 0; i <= source.clientHeight / 980; i++) {

                        var srcImg  = canvas;
                        var sX      = 0;
                        var sY      = 1120*i; 
                        var sWidth  = 778; 
                        var sHeight = 1120;
                        var dX      = 0;
                        var dY      = 0;
                        var dWidth  = 778;
                        var dHeight = 1120;

                        window.onePageCanvas = document.createElement("canvas");
                        onePageCanvas.setAttribute('width', 778);
                        onePageCanvas.setAttribute('height', 1120);
                        var ctx = onePageCanvas.getContext('2d');

                        ctx.drawImage(srcImg,sX,sY,sWidth,sHeight,dX,dY,dWidth,dHeight);

                        var canvasDataURL = onePageCanvas.toDataURL("image/png", 0.92);
                        var width         = onePageCanvas.width;
                        var height        = onePageCanvas.clientHeight;


                        if (i > 0) {
                            doc.addPage();
                        }
                        doc.setPage(i+1);
                        doc.addImage(canvasDataURL, 25, 0);


                    }
                    doc.save('draft.pdf');


                }})

            }, 1000)