1

estou tendo um problema ao tentar utilizar o JSPdf com Vuejs. Peguei um tutorial na internet (esse aqui) que mostra como imprimir todo o conteudo de uma div (pois não estava conseguindo. Porem, no teste funciona perfeitamente, no meu, mesmo conseguindo adaptar, o PDF vem tudo em branco, alguem consegue ajudar?

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);
        })
      }
}

2 Respostas 2

0

Olá,

Não "debuguei" seu código para entender onde o erro acontece, porém, Já usei jsPDF com jsPDF-AutoTable e acredito que isso possa servir para o que você precisa. Pressupondo que você já tenha uma noção de JavaScript e VueJS, segue abaixo o código.

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>

Não existe muito segredo nesse script. A função autoTable dispoêm de 2 parametros, o primeiro é um Array com o nome das colunas e o segundo é um Array bidimenssional onde cada linha possui um array com os valores.

Qualquer dúvidas estamos a disposição, no entando sugiro que leia as instruções antes de qualquer coisa, abraço.

jsPDF

jsPDF-AutoTable

Edit

Exemplo usando o elemento HTML table e o método autoTableHtmlToJson link jsFiddle

0

Depois de muito tentar, consegui resolver meu caso, vou deixar o código aqui para aqueles que possuírem o mesmo problema que eu. Agradeço aqueles que tentaram me ajudar.

$('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)

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .