Problems generating PDF with hidden content with jsPDF and html2canvas

Question

Problems generating PDF with hidden content with jsPDF and html2canvas

Navigation

#1 by (0 votes)

0

I am trying to generate a PDF with js using html2canvas and jsPDF . When content is being viewed, everything works 100%, but I need that content to be hidden. Already tried:

- display: none;
- visibility: hidden;
- Position: absolute;

Among other things. I always get this error when I try to generate pdf with "hidden" content on the page.

jspdf.debug.js: 2571 Uncaught Error: Supplied data is not a JPEG

Here is the code used:

<div id="conteudo-pdf">
    Conteúdo
</div>

<script type="text/javascript">
    var doc = new jsPDF();

    $('#btGerarPDF').click(function () {
        doc.addHTML($("#conteudo-pdf"), function(){
            doc.save('arquivo.pdf');
        });

    });
</script>

javascript pdf jspdf html2canvas

asked by anonymous 03.11.2017 / 14:23

1 answer

Zend Framework 2 My Acl plugin authentication returns a strange error Show images before uploading

score 0 · Answer 1

A while ago I answered that question Error - jsPDF PDF Generation , now it has another title, it may not work because you are using the addHTML plugin that has been deprecated.

To know more I recommend that you read the answer I gave in the question quoted.

See working:

$(document).ready(function(){
    $('#btnPDF').click(function() {
      savePDF(document.querySelector('#documento'));
    });
});
  
function savePDF(codigoHTML) {
  var doc = new jsPDF('portrait', 'pt', 'a4');
    data = new Date();
    margins = {
        top: 40,
        bottom: 60,
        left: 40,
        width: 1000
    };
    doc.fromHTML(codigoHTML,
    margins.left, // x coord
    margins.top, { pagesplit: true },
    function(dispose){
        doc.save("Relatorio - "+data.getDate()+"/"+data.getMonth()+"/"+data.getFullYear()+".pdf");
    });
}

#documento {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script><divid="documento">Esse conteúdo esta ocultado no navegador, mas ao gerar o <strong>PDF</strong> ele irá aparecer!</div>

<button class="btn btn-danger" id="btnPDF">Gerar PDF</button>