Gerar Print Screen em PDF WordPress Elementor

Gerar Print Screen em PDF WordPress Elementor.js

Esse estilo CSS serve para manter o tamanho fixo da area de print no celular

@media (max-width: 1200px) {
  #print-area {
    width: 1000px !important;
      overflow-x: auto; 
  }
}



<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.3.2/html2canvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script>



<script>
jQuery("#btn-download").on('click', function (e) {
    e.preventDefault();
    html2canvas(document.getElementById("print-area"), {
        scale: 2, // Ajuste o fator de escala conforme necessário para melhorar a qualidade
        scrollY: -window.scrollY,
        useCORS: true
    }).then(function (canvas) {
        const { jsPDF } = window.jspdf;
        const pdf = new jsPDF({
            orientation: 'l',
            unit: 'mm',
            format: 'a4'
        });

        const imgData = canvas.toDataURL('image/jpeg', 1.0);
        const pdfWidth = pdf.internal.pageSize.getWidth(); // largura da página A4 em mm
        const pdfHeight = pdf.internal.pageSize.getHeight(); // altura da página A4 em mm

        // Calculando a nova altura da imagem para manter a proporção original
        const imgHeight = canvas.height * pdfWidth / canvas.width;

        // Caso a imagem recalculada seja maior que a altura do PDF, ajustar proporcionalmente
        let newHeight = imgHeight;
        let newWidth = pdfWidth;

        // Se a altura da imagem esticada for maior que a do PDF, recalcule a largura para manter a proporção
        if (imgHeight > pdfHeight) {
            newHeight = pdfHeight; // Ajustar para a altura do PDF
            newWidth = canvas.width * pdfHeight / canvas.height; // Recalcular a largura para manter proporção
        }

        // Adicionando a imagem ao PDF. Ajustar os parâmetros de posição caso deseje centralizar
        pdf.addImage(imgData, 'JPEG', 0, 0, newWidth, newHeight);

        pdf.save("download.pdf");
    });
});
</script>