1

Estou a gerar o meu html em PDF com JsPDF. O meu html é maior do que uma folha A4. Para resolver o problema preciso de criar paginação em Jspdf.

Código que tenho que só gera pdf com uma página:

window.html2canvas = html2canvas; 

function demoFromHTML() { 

const html_source = document.getElementById('employee_detail'); // O id do elemento que contém o Html que quer imprimir. 
const filename = 'Test.pdf';

html2canvas(html_source).then(function(canvas) { 
let imgData = canvas.toDataURL('image/png'); 

let pdf = new jsPDF('p', 'mm', 'a4'); // Essas demissões [297, 210] correspondem a um A4 

// addImage(imageData, format, x, y, width, height, alias, compression, rotation) 
// x: Coordenada (em unidades declaradas no início do documento PDF) contra a borda esquerda da página 
// y: Coordenada (em unidades declaradas no início do documento PDF) contra a borda superior da página 
pdf.addImage(imgData, 'PNG', 10, 10);
pdf.save(filename);
}) 

}

Para criar essa paginação preciso de usar o pagesplit, mas não estou a conseguir gerar pdf com mais de uma página.

1

1 Resposta 1

2

Esta solução quebra uma página grande em várias páginas automaticamente.

window.html2canvas = html2canvas;

function demoFromHTML() {

  const html_source = document.getElementById('employee_detail'); // O id do elemento que contém o Html que quer imprimir.
  const filename = 'Test.pdf';


  html2canvas(html_source).then(function(canvas) {
    /*
    [210,297] Sao os números (largura e altura do papel a4) que eu encontrei para trabalhar com eles.
    Se você puder encontrar números oficiais do jsPDF, usa.
     */
    let imgData = canvas.toDataURL('image/png');
    let imgWidth = 210; // Largura em mm de um a4
    let pageHeight = 297; // Altura em mm de um a4

    let imgHeight = canvas.height * imgWidth / canvas.width;
    let heightLeft = imgHeight;
    let position = 0;
    let pdf = new jsPDF('p', 'mm');
    let fix_imgWidth = 15; // Vai subindo e descendo esses valores ate ficar como queres
    let fix_imgHeight = 15; // Vai subindo e descendo esses valores ate ficar como queres

    pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
    heightLeft -= pageHeight;

    while (heightLeft >= 0) {
      position = heightLeft - imgHeight;
      pdf.addPage();
      pdf.addImage(imgData, 'PNG', 0, position, imgWidth + fix_imgWidth, imgHeight + fix_imgHeight);
      heightLeft -= pageHeight;
    }

    pdf.save(filename);
  })

}
3
  • o código está a funcionar e gera as 3 páginas no pdf, só existe um problema, não quebra de forma correta, corta as linhas a meio, exemplo link
    – Bruno
    Commented 23/05/2019 às 8:26
  • precisava da sua ajuda, podemos falar no chat link
    – Bruno
    Commented 23/05/2019 às 14:09
  • pode ver o chat
    – Bruno
    Commented 23/05/2019 às 19:29

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 .