Javascript 使用html2Canvas和jsPDF for php应用程序另存为PDF 3次工作1次

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

web应用程序使用php并使用Bootstrap4 在一边（1 table+1 graph in chart.js），它的工作方式就像一个梦，但在另一边，一个包含多个块的视图在3个块中工作1次，我知道它为什么不稳定

我在谷歌上搜索，没有CSS转换会让html2canvas出问题，我认为html2canvas在阅读DOM这方面可能会有一些麻烦，但需要另一种观点

示例： 第一方：

第二方： 这是我的密码：

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

$（“.loading spinner container”）.removeClass（'d-flex'）.addClass（'d-none'）//高速缓存加载微调器
html2canvas（document.querySelector（“body”），{scrollX:0，scrollY:0}）。然后（canvas=>{
var dataURL=canvas.toDataURL（）；
var pdf=新的jsPDF（“L”）；
var width=pdf.internal.pageSize.getWidth（）；
var height=pdf.internal.pageSize.getHeight（）；
pdf.addImage（画布，'JPG'，0,0，宽度，高度）；
pdf.另存（“”）；
显示内容（）；
});
}

我隐藏了侧边栏和顶边栏，因为我注意到它可以使html2canvas移动图像，但现在一些单元格从框中出来，有时不

---

谢谢你的帮助

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