html2canvas - is there to print a hidden DIV to pdf?

问题

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

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

回答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.

来源：https://stackoverflow.com/questions/54715259/html2canvas-is-there-to-print-a-hidden-div-to-pdf

标签

javascript

jquery

jspdf

html2canvas