Question

我正在从html生成pdf。但不能产生适当的。签名图像在另一页上中断。检查下面的图像。如果内容或图像损坏，有什么办法可以在另一个pdf页面上移动。

木偶版本-3.3.0 节点版本-12.16.1

代码：

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属性闯入：避免；在签名上

木偶形象破坏问题

1 个答案: