Estoy buscando utilizar el contador css personalizado para crear mi propio contador dentro del pie de página de Puppeteer en lugar de usar la clase pageNumber predeterminada, la razón es que tengo un caso de uso en el que necesito convertir varias URL a PDF y luego fusionar esos PDF en un solo documento que contiene capítulos, tabla de contenido y mucho más, por lo que si uso la numeración de página predeterminada, termino con el número de página que comienza en la página 1 en cada URL PDF generada.
Vea el ejemplo a continuación del comportamiento predeterminado de numeración de páginas.
URL del PDF 1
URL del PDF 2
URL del PDF 3
Necesito poder personalizar qué número se muestra en el pie de página en el momento en que genero cada PDF yo mismo o al menos el número inicial y hacer que se incremente a partir de ese número automáticamente. Esto me permite comenzar los números de página en un número más alto que 1 por cada PDF después de generar el primero.
Así que intenté inyectar css personalizado usando el selector de impresión @page antes de generar la plantilla de pie de página cuando convertí la página a PDF pero produjo un resultado en blanco. Tengo la sensación de que el estilo de la plantilla de pie de página se representa de forma aislada y no recoge el css de @page personalizado que estoy inyectando en el elemento principal, incluso si inyecto el css en línea en la plantilla de pie de página que no funcionará porque el contador I supongamos que será el mismo número para cada página.
const puppeteer = require('puppeteer'); const browser = await puppeteer.launch({ headless: true }) const page = await browser.newPage() var file = '/path/to/pdf/xxx.pdf'; var urls = [ 'www.example1.com', 'www.example2.com', 'www.example3.com' ] for (var i = 0; i < urls.length; i++) { await page.goto(urls[i], { waitUntil : 'networkidle2' }) await page.addStyleTag({ content: "@page { counter-increment: page } .pageNumbers { content: counter(page) }" }) // generate PDF await page.pdf({ path: file, format: 'A4', displayHeaderFooter: true, headerTemplate: `<div style="height:100px;min-width:100%;"> </div>`, footerTemplate: `<span style="width: 100%; font-size: 14px; width: 50px; height: 50px; color:black; margin: 0px 20px; display:inline;" class="pageNumbers"></span>`, margin: { top: '100px', bottom: '100px' } }) } // kill await browser.close();La fusión ocurre después de lo anterior, pero no tiene la capacidad de manejar la numeración de páginas, por lo que puedo decir, estoy usando Easy PDF Merge .
Espero que haya alguien más que haya tenido un caso de uso similar y pueda orientarme en la dirección correcta sobre cómo sortear las limitaciones de las plantillas de pie de página de Puppeteer.