另存为 PDF 与 html2Canvas 和 jsPDF 用于 php 应用程序工作 1 次 3

Question

I would like to save an HTML page as PDF so I used html2canvas and jsPDF to do it.

The web application is in php and use Bootstrap 4 On 1 side (1 table + 1 graph in chart.js) it works like a dream but on the other side, a view with multiple blocks it works 1 time in 3 and I would know why it's not stable...

I search on google and there's no CSS transformation that could make html2canvas bug, I think html2canvas could have some trouble to read the DOM on this side but need another point of view

Examples: 1st side: 1 side that works

2nd side: 2nd side that works 2nd side that doesn't work... Here's my code:

                    <div id="mad" class="row">
                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 px-1">
                            <div class="row">
                                <?php $this->load->view('block/rapport/mm_ma', $mad_data); ?>
                            </div>
                            <div class="row">
                                <?php $this->load->view('block/rapport/comments_section', array('block_id' => 'mad', 'comments' => $mad_data['comments'])); ?>
                            </div>
                        </div>
                    </div>
                    <div id="pdr" class="row">
                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 px-1">
                            <div class="row">
                                <?php $this->load->view('block/rapport/mm_ma', $pdr_data); ?>
                            </div>
                            <div class="row">
                                <?php $this->load->view('block/rapport/comments_section', array('block_id' => 'pdr', 'comments' => $pdr_data['comments'])); ?>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

        </div>

My function to export as PDF:

        $(".loading-spinner-container").removeClass('d-flex').addClass('d-none'); //cache le loading spinner
        html2canvas(document.querySelector("body"), {scrollX: 0, scrollY: 0}).then(canvas => {
            var dataURL = canvas.toDataURL();
            var pdf = new jsPDF("L");
            var width = pdf.internal.pageSize.getWidth();
            var height = pdf.internal.pageSize.getHeight();
            pdf.addImage(canvas, 'JPG', 0, 0, width, height);
            pdf.save("<?= ucfirst($this->uri->segment(2) . '/' . $this->uri->segment(3, '')) . "_" . date("Ymd") . ".pdf" ?>");
            show_content();
        });
    }

I hide the sidebar and the topbar because I noticed that it could make html2canvas to shift the image but now some cells comes out of their box and sometimes don't...

Thanks for the help!

Answer 1

Solved the problem by setting the option of html2canvas 'foreignObjectRendering' = true