Как конвертировать HTML контент в PDF с изображениями - PullRequest
Новая
       7

Как конвертировать HTML контент в PDF с изображениями

0 голосов
/ 02 октября 2019

Я пытаюсь преобразовать макет с изображениями в PDF.

Я могу конвертировать в PDF без изображений. Я также использую jspdf.js и html2canvas.js. Я делюсь своим кодом: 

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>
<script type="text/javascript" src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>
<div id="content">
<h3>Hello, this is a H3 tag</h3>
<img src="https://www.hostname.space/public/uploads/2018/05/worldwide-support-1.png" class="img-responsive" style="top:40px;position:absolute;z-index:10;width:50px;">

<img src="https://www.hostname.space/public/uploads/2018/05/optimize-1.png" class="img-responsive" style="top:40px;position:absolute;">

</div>
<button id="btnPrint" style="top:170px;position:absolute;">generate PDF</button>


<script>    var cache_width = $('#content').width(); //Criado um cache do CSS
var a4 = [595.28, 841.89]; // Widht e Height de uma folha a4

$(document).on("click", '#btnPrint', function () {
    // Setar o width da div no formato a4
    $("#content").width((a4[0] * 1.33333) - 80).css('max-width', 'none');

    // Aqui ele cria a imagem e cria o pdf
    html2canvas($('#content'), {
        onrendered: function (canvas) {
            var img = canvas.toDataURL("image/png", 1.0);

            var doc = new jsPDF('landscape'); // default is portrait
            doc.addImage(img, 'PNG', 20, 20);
            doc.save('NAME-OF-PDF.pdf');
            //Retorna ao CSS normal
            $('#content').width(cache_width);
        }
    });
}); </script>

Я тоже делюсь своей скрипкой. https://jsfiddle.net/pratapamit/dv315guc/33/

...