html2canvas - есть ли распечатать скрытый DIV в PDF? - PullRequest
Новая
       8

html2canvas - есть ли распечатать скрытый DIV в PDF?

0 голосов
/ 15 февраля 2019

Фон

У меня есть таблица записей, в которой используется элемент управления "tabulator", чтобы пользователи могли сортировать, фильтровать и т. Д., Как только у них есть результаты, которые они хотят получить в таблице.Необходимо предоставить пользователям способ инициировать создание PDF в строке, используя шаблон PDF.В верхней части страницы у меня есть выпадающее меню, где они могут выбрать шаблон.Например, у него будут такие параметры:

  • PDF с синим логотипом
  • PDF с розовым логотипом

и т. Д.

Что я знаю, как делать: 1. Я знаю, как циклически проходить по выбранным записям в моей таблице в jquery 2. Я знаю, как создать базовый документ jsPDF.3. Механизм «шаблона» будет просто 2 разных, которые предопределены на веб-странице.В зависимости от того, какой вариант они выбирают в раскрывающемся списке, я могу определить, какой логотип включить.

Проблема

Похоже, что если DIV, которые будут включены в PDF, не видны, html2canvas не будет работать.

Пока что это код прототипа, с которым я играю: (кроме того факта, что DIV, который я пытаюсь показать в PDF, отображается на экране, все остальное работает). 

<div id="bluetemplate" class="ug_logo_style" style="display: none">
    <img class="bluelogo"></img>
</div>
<div id="pinktemplate" class="ug_logo_style" style="display: none">
    <img class="pinklogo"></img>
</div>

$("#templatedropdown").change(function(){
   var selectedtemplate = this.value;
   switch (selectedtemplate){
        case 'blue':
            $("div#bluetemplate").show();
            $("div#pinktemplate").hide();
            break;
        case 'pink':
            $("div#pinktemplate").show();
            $("div#bluetemplate").hide();
            break;
   }
});

$("#btntemplate").click(function(){
    switch($('#template option:selected').val()){
        case 'blue':            
            var imgData;
            html2canvas($("#bluetemplate"), {
                useCORS: true,
                onrendered: function (canvas) {
                    imgData = canvas.toDataURL(
                       'image/png');
                    var doc = new jsPDF({
                        orientation: 'landscape', 
                        unit:'pt', 
                        format:[400,200]});
                    doc.addImage(imgData, 'PNG', 10, 10);

                    doc.text(registrant.first_name + " " + registrant.last_name, 10, 100);
                    doc.text(registrant.email, 10, 120);                   
                    doc.save(registrant.event_id + '_' + registrant.id + '.pdf');
                    window.open(imgData);
                }
            });

            break;
        case 'pink':
            var imgData;
            html2canvas($("#pinktemplate"), {
                useCORS: true,
                onrendered: function (canvas) {
                    imgData = canvas.toDataURL(
                       'image/png');
                    var doc = new jsPDF({
                        orientation: 'landscape', 
                        unit:'pt', 
                        format:[400,200]});
                    doc.addImage(imgData, 'PNG', 10, 10);

                    doc.text(registrant.first_name + " " + registrant.last_name, 10, 100);
                    doc.text(registrant.email, 10, 120);                   
                    doc.save(registrant.event_id + '_' + registrant.id + '.pdf');
                    window.open(imgData);
                }
            });

            break;
    }

Ответы [ 2 ]

0 голосов
/ 18 апреля 2019

Вы пытались добавить это в свой css 

.html2canvas-container { width: 3000px !important; height: 3000px !important; }

Пожалуйста, обратитесь здесь для вопросов, касающихся печати невидимого содержимого.

0 голосов
/ 16 февраля 2019

Что вы можете сделать, это временно отобразить скрытый div, преобразовать в pdf, а затем скрыть его снова.Это только обходной путь, если допустимо показывать логотип только за доли секунды. 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js" 
        integrity="sha384-NaWTHo/8YCBYJ59830LTz/P4aQZK1sS0SneOgAvhsIl3zBu8r9RevNg5lHCHAuQ/"
        crossorigin="anonymous"></script>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<!-- html2canvas 1.0.0-alpha.11 or higher version is needed -->
<script>
    function download() {
        let pdf = new jsPDF('p', 'pt', 'a4');
        pdf.setProperties({
            title: 'jsPDF sample'
        }); // used for window.open() only
        let bluetemplate = document.getElementById('bluetemplate');
        bluetemplate.style.display = '';
        pdf.html(document.body, {
            callback: function () {
                //pdf.save('test.pdf');
                window.open(pdf.output('bloburl')); // to debug
                bluetemplate.style.display = 'none';
            }
        });
    }
</script>
...