Puppeteerpdf分页错误

html5 • • 问答

我尝试通过 puppetter 生成 pdf 文件。它适用于一页，但是当我尝试生成多页 pdf 文档时，我有一个分页符的错误。HTML模板用于下面的生成。如果可以，请你帮助我。复制的前提条件：以 100% 的高度填充第一页并为下面的块添加标题。

HTML模板

function getHTMLTemplate(
    height = 'auto', 
    component = '<div></div>', 
    style = '<style></style>',
    header = '<div></div>',
    footer = '<div></div>',
) {
    return `
        <!DOCTYPE html>
        <html>                
            <head>
                <meta charset="utf-8" />
                <meta http-equiv="X-UA-Compatible" content="IE=edge">
                <title>HTML to PDF Example</title>
                <meta name="viewport" content="width=device-width, initial-scale=1">
                <style>
                    * {margin: 0; padding: 0; border-spacing: 0;}

                    .page {
                        width: 210mm;
                        height: ${height};
                        overflow: hidden;
                        background: transparent;
                        margin-top: -1px !important;
                        margin-bottom: -1px !important;
                    }

                    body>div {
                        width: 100%;
                        position: fixed;
                    }

                    body>div:first-child {
                        top: 0;
                    }

                    body>div:nth-child(2) {
                        bottom: 0;
                    }
                    
                    @page {
                        size: 'A4';
                        margin: 0;
                    }
                    
                    @media print {
                        thead {display: table-header-group;} 
                        tfoot {display: table-footer-group;}

                        html, body {
                            width: 210mm;
                            height: 297mm;
                        }
                        
                        tbody::after {
                            content: ''; 
                            display: block;
                            page-break-after: always;
                            page-break-inside: avoid;
                            page-break-before: avoid;        
                        }
                    }

                    .block {
                        top: 0;
                        width: 210mm;
                        height: 40px;
                        position: absolute;
                        background: #092a4e;
                        z-index: 1;
                    }
                </style>
            </head>
            <body>
                <div></div>
                ${header}
                ${footer}
                <table>
                    <thead>
                        <tr>
                            <td>
                                ${header}
                            </td>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>
                                <div>
                                    ${component}
                                    ${style}
                                </div>
                            </td>
                        </tr>
                    </tbody>
                    <tfoot>
                        <tr>
                            <td>
                                ${footer}
                            </td>
                        </tr>
                    </tfoot>
                </table>
            </body>
        </html>
    `;
}

生成PDF

const browser = await puppeteer.launch({ args: ['--no-sandbox', '--disable-setuid-sandbox'] });
const page = await browser.newPage();
await page.emulateMediaType('print');
await page.setContent(utils.getHTMLTemplate(`calc(891mm - 82px)`, component, sheet.getStyleTags(), template.header, template.footer));
const buffer = await page.pdf({
   format: "A4",
   margin: { top: 0, bottom: 0, right: 0, left: 0 },
   printBackground: true,
});

错误
在这里输入图片描述

回答

为避免 div 分成两个页面，请在 html 中向 div 添加一个类（例如“myDiv”），并在页面 CSS 中包含以下代码。

@media print {
  .myDiv {
     break-inside: avoid;
  }
}

以上是Puppeteerpdf分页错误的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>