0

Estou tentando gerar um PDF de uma página feita em HTML. Essa página possui um gráfico criado com Chart Js. Eu gostaria de ao clicar no botão, fosse gerado um PDF do gráfico. Porém, ao clicar no Botão, é gerado o erro Uncaught (in promise) Error: Element is not attached to a Document. Vocês sabem onde posso estar cometendo alguma falha para apresentação de tal erro ?

  • Estou usando html2canvas (pois andei lendo que é necessário primeiro converter o arquivo para PNG).

  • Estou usando também o jspdf para converter o arquivo para PDF.

  • Segue abaixo o código que está apresentando problemas:

window.onload = function() {
  //Chamando função ao carregar a página.
  let pegar = pegarStatusAtividades(configuraDados);

  html2canvas(document.querySelector("#canvas_status_atividades")).then(canvas => {
    document.body.appendChild(canvas)
  });

  // Função que transforma canvas em imagem e exporta para PDF
  // Você pode usar $(.'elemento').click() do jQuery para disparar a função 
  $('#gerar-pdf').on('click', function() {
    html2canvas($('#canvas_status_atividades'), {
      onrendered: function(canvas) {
        var imgData = canvas.toDataURL('image/png');
        var pdf = new jsPDF('p', 'mm');
        pdf.addImage(imgData, 'PNG', 10, 10);
        pdf.save('test.pdf');
      }
    });
  });

}
<!DOCTYPE html>
<html lang="pt-BR">

<head>
  <!-- Required meta tags -->
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE-edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Aprendendo</title>


  <link href="_bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
  <!-- ARQUIVO CSS DO BOOTSTRAP -->

  <link href="_chart/dist/Chart.css" rel="stylesheet">
  <script src="_chart/dist/Chart.js"></script>

</head>

<body>

  <div class="row">
    <div class="col-lg-12">
      <h1 class="text-center">Gráficos de Status das Atividades</h1>
    </div>
  </div>

  <div class="container-fluid" id="container-canvas">

    <div class="row">
      <div class="col-lg-8 offset-lg-2">
        <canvas id="canvas_status_atividades" width="400" height="400"></canvas>
      </div>
    </div>

    <div class="row">
      <div class="col-lg-8 offset-lg-2">
        <button class="btn btn-primary" id="gerar-pdf">Gerar PDF</button>
      </div>
    </div>

  </div>

  <script src="_jquery/jquery-3.3.1.min.js"></script>
  <!-- ARQUIVO JQUERY -->
  <script src="_bootstrap/4.3.1/js/bootstrap.min.js"></script>
  <!-- ARQUIVO BOOTSTRAP -->
  <script src="_jsPDF/dist/jspdf.min.js"></script>
  <!-- ARQUIVO jspdf -->
  <script src="_html2canvas/html2canvas.js"></script>
  <!-- ARQUIVO html2canvas -->
  <script src="scripts/script.js"></script>

</body>

</html>

OBS: O Gráfico é gerado sem problemas com o Chart JS:

inserir a descrição da imagem aqui

1 Resposta 1

2

Eu não entendo, você não é o primeiro que vejo fazendo isto, eu fui um colaborador do projeto html2canvas (foi só umas 2 modificações de código) e não entendo porque as pessoas insistem em usar html2canvas para obter a imagem de um canvas real.

Se o elemento já é canvas:

<canvas id="canvas_status_atividades" width="400" height="400"></canvas>

Basta usar .toDataURL() para obter a imagem, exemplo:

$('#gerar-pdf').on('click', function() {
    var canvas_status_atividades = document.getElementById('canvas_status_atividades');
    var pdf = new jsPDF('p', 'mm');
    pdf.addImage(canvas_status_atividades.toDataURL(), 'PNG', 10, 10);
    pdf.save('test.pdf');
});

Já o erro Element is not attached to a Document pode ser bug da versão do HTML2CANVAS que está usando, não sei qual está usando, mas talvez você esteja desatualizado, ou pode ser algum script seu que está "desanexando" o elemento do corpo do DOM, mas não é algo relacionado ao seu código.

18
  • Muito bom, Guilherme. Muito obrigado mesmo, cara. Deixa eu te fazer mais uma pergunta. Se eu quiser, ao invés de pegar só um gráfico, pegar a página toda (Pois a página tem vários gráficos), como eu faria ? 9/01/2020 às 16:47
  • Tipo, pegar tudo mesmo. Menu, rodapé e outros elementos html da página. 9/01/2020 às 16:55
  • @Jason-TheInternship. neste caso vai ter que usar o html2canvas mesmo, mas dá uma olhada se está usando a versão mais recente e se não tem outro script atrapalhando, eu pessoalmente em seu lugar trocaria o canvas na hora no snapshot pela imagem feita pelo toDataURL e em seguida usaria o HTML2CANVAS
    – Syzoth
    9/01/2020 às 17:17
  • 1
    @Jason-TheInternship. mas se nada é gerado é pq tem outro erro, vc fez a minha sugestão, somente no momento do snapshot trocar o canvas pela imagem gerada e depois aplicar o html2canvas?
    – Syzoth
    9/01/2020 às 17:41
  • 1
    @Jason-TheInternship. pega canvas_status_atividades.toDataURL() adiciona com var nova = new Image; nova.src = canvas_status_atividades.toDataURL();, ai pega a variavel nova, ficando assim: canvas_status_atividades.parentNode.replaceChild(canvas_status_atividades, nova);, ai dentro do onrendered faça ao contrário para restaurar: onrendered: function () { nova.parentNode.replaceChild(nova, canvas_status_atividades); ... } e tenta ao menos pegar o screenshot e abrir em um window.open, a parte do PDF vc faz depois.
    – Syzoth
    9/01/2020 às 18:23

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 .