html2canvas - 是否可以将隐藏的 DIV 打印为 pdf？

Question

Background

I have a table of records that uses the "tabulator" control to allow users to sort, filter etc. once they have the results they want in the table, I need to provide a way for users trigger the creation of a PDF per row, using a PDF template. At the top of the page, I have a drop down menu where they can select a template. For example, it will have options like this:

• pdf with blue logo
• pdf with pink logo

etc.

What I know how to do: 1. I know how to loop through the selected records in my table in jquery 2. I know how to create a basic jsPDF document. 3. The "template" mechanism will simply be 2 different that are predefined in the webpage. Depending on which option they select in the dropdown, I can determine which logo to include.

Problem

It seems that unless the DIVs that will be included in the PDF are visible, html2canvas won't work.

So far, this is the prototype code I've been playing with: (other than the fact that the DIV i'm trying to PDF shows on the screen, everything else works.)

<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;
    }

Answer 1

What you can do is to temporarily display the hidden div, convert to pdf, then hide it again. It is only a workaround though if it's acceptable to only show the logo for a split second.

<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>

Answer 2

Have you tried adding this to your css

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

Please refer here for issues relating to printing invisible content.