Javascript Puppeter pdf页面中断错误_Javascript_Node.js_Pdf_Puppeteer

Javascript Puppeter pdf页面中断错误

javascript node.js pdf

Javascript Puppeter pdf页面中断错误,javascript,node.js,pdf,puppeteer,Javascript,Node.js,Pdf,Puppeteer,我试图通过puppetter生成pdf文件。它适用于一页，但当我试图生成多页pdf文档时，我有一个分页符错误。HTML模板用于生成以下内容。如果可以的话，请帮帮我。复制的先决条件：以100%的高度填充第一页，并为下面的块添加标题 HTML模板 function getHTMLTemplate( height = 'auto', component = '<div></div>', style = '<style></style

我试图通过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 class="block"></div>
                ${header}
                ${footer}
                <table>
                    <thead>
                        <tr>
                            <td>
                                ${header}
                            </td>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>
                                <div class="page">
                                    ${component}
                                    ${style}
                                </div>
                            </td>
                        </tr>
                    </tbody>
                    <tfoot>
                        <tr>
                            <td>
                                ${footer}
                            </td>
                        </tr>
                    </tfoot>
                </table>
            </body>
        </html>
    `;
}

臭虫

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

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

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

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