使用html2Canvas和jsPDF另存为PDF，适用于php应用程序，每3遍工作1次

Question

我想将HTML页面另存为PDF，所以我使用html2canvas和jsPDF来完成。

Web应用程序位于php中，并使用Bootstrap 4在一侧（chart.js中有1张表+ 1张图），它像梦一样工作，但在另一侧，具有多个块的视图在3中工作1次，我知道为什么它不稳定...

我在Google上进行搜索，没有CSS转换可以使html2canvas出现错误，我认为html2canvas可能难以理解这一方面的DOM，但还需要另一种观点

示例：第一侧：1 side that works

第二面：2nd side that works2nd side that doesn't work...这是我的代码：

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

我要导出为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();
        });
    }

我隐藏了侧边栏和顶部栏，因为我注意到它可以使html2canvas移位图像，但是现在有些单元格脱离了它们的框，有时却没有...

感谢您的帮助！

Answer 1

通过设置html2canvas'foreignObjectRendering'= true解决了该问题