puppeteer 图像中断问题

Question

我正在从 html 生成 pdf。但不能正确生成。签名图像在另一页上中断。检查下图。有什么方法可以让内容或图像中断，然后它会在另一个 pdf 页面上移动。

puppeteer 版本 - 3.3.0 节点版本 - 12.16.1

check image here

代码：

await page.pdf({
                    path: pdfPath,
                    format: 'A4',
                    printBackground: true,
                    displayHeaderFooter: true,
                    headerTemplate: '<div id="header-template" style="font-size:10px !important; color:#808080; padding-left:10px"><span class="">Production</span></div>',
                    footerTemplate: '<div id="footer-template" style="font-size:10px !important; color:#808080; padding-left:10px"><span class="">Production</span><span class="pageNumber" style="font-size:10px !important; color:#808080; padding-left:200px"></span></div>',
                    margin: {
                        top: '100px',
                        bottom: '100px',
                        right: '30px',
                        left: '30px',
                    },
                });
html:
<div style="float: left; margin-top: 5px;width: 98.5%;">
                <div id="signature">
                    <div class="sign">
                        <img src="{{signature}}" alt="sign"
                            style="margin-top: 10px;width: 120px;height: 120px;float: right;" />
                    </div>
                    <span>Signature By {{ signature_by }}<br>({{ signature_by_role }})</span>
                </div>
            </div>

CSS：

#signature {
            float: right;
            width: auto;
            margin-right: 1%;
        }
        #signature img {
            width: 100%;
        }
        #signature span {
            text-align: center;
            width: 100%;
            color: #000;
            float: left;
            font-size: 11px;
            font-weight: 500;
        }
        .sign {
            min-height: 50px;
            text-align: center;
            margin: 0 auto;
        }

Answer 1

使用 css 属性 break-inside: Avoid;签名时