如何使用Chrome DevTools Protocol的printToPDF修改first pageNumber或执行header或footer模板中的JS

Question

I'm using Headless Chrome to print out PDF files by using the printToPDF CDP method. If we set displayHeaderFooter parameter to true , then we can set specific page header and footer by using the parameters headerTemplate and footerTemplate . The protocol provides some HTML classes to display some information, these are: date , title , url , pageNumber , totalPages .

For example, we can set footerTemplate to <span class="pageNumber"></span> to display the current page number in the footer. We also need to add some style to display it properly. The default header and footer settings can be found here , and the renderer C++ component is here .

I would like to modify the displayed pageNumber values. My goal is to count pages from a given number.

The Puppeteer API documentation note that headerTemplate and footerTemplate markup have the following limitations:

1. Script tags inside templates are not evaluated.
2. Page styles are not visible inside templates.

A GitHub comment provides the following:

<div style="font-size: 10px;">
  <div id="test">header test</div>
  <img src='http://www.chromium.org/_/rsrc/1438879449147/config/customLogo.gif?revision=3' onload='document.getElementById("test").style.color = "green";this.parentNode.removeChild(this);'/>
</div>

It says, if we use an onload attribute on an img tag, then we can run JavaScript in the templates. However, I was not able to reproduce the result, what is shown on the screenshot under the snipplet.

For example, the following JavaScript could count pages from 10:

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="tmpimg" 
onload="var x = document.getElementById('pn').innerHTML; var y = 10; document.getElementById('pn').innerHTML = parseInt(x) + y; this.parentNode.removeChild(this);"/>
<span id="pn" class="pageNumber"></span>

But unfortunately this script does not modify the page numbering, and I have no idea how to solve this problem. I've also tried to use pure CSS solutions, but without success.

Any ideas are welcome to resolve this issue.

Answer 1

Have you tried moving to span above the img tag?

Answer 2

One approach you can try is to use JavaScript to modify the pageNumber element in the DOM before calling the printToPDF method. You can do this by injecting a script into the page that runs before the PDF is generated.

Here is an example of how you can do this using Puppeteer:

const page = await browser.newPage();
// Navigate to the page you want to generate a PDF for
await page.goto('https://www.example.com');
// Inject a script into the page to modify the page numbering
await page.evaluate(() => {
  // Get the pageNumber element
  const pageNumberElement = document.querySelector('.pageNumber');
  // Modify the innerHTML of the element to start counting from 10
pageNumberElement.innerHTML = parseInt(pageNumberElement.innerHTML) + 10;
});
// Generate the PDF using the modified page numbering
const pdf = await page.pdf({ displayHeaderFooter: true });
// Save the PDF to a file
fs.writeFileSync('output.pdf', pdf);
await page.close();

Answer 3

I tried straight forward approaches to solve this problem and they didn't work. Even obscure apis like CSS expressions and counters don't work to solve this. Fortunately there seems to be a simple enough work around.

We print each page separately using the pageRange parameter and then combine all the pages to generate the required pdf. This enables us to print each header/footer if it were a function of the pageNumber . For example:

const footerTemplate = function (pageNumber) {
    return `<div>Page number: ${pageNumber + 24}</div>`;
};

We need to iterate over each page and print it.

const printPage = function (pageNumber) {
    return {
        ...
        path: `html-page-${pageNumber}.pdf`,
        footerTemplate: footerTemplate(pageNumber),
        pageRanges: String(pageNumber)
    };
};


(async function () {
    ...
    const page = await browser.newPage();
    var pageNumber = 1;
    try {
        while (pageNumber > 0) {
            await page.pdf(printPage(pageNumber));
            pageNumber += 1;
        }
    } catch (e) {
    } finally {
       // Merge and clean up
    }
})();

There is no trivial way to determine the total number of pages to print. So we don't know when to stop. Fortunately, Chrome sends an error when we try to print a page that's out of range. So we can use that to stop our printing.

Attached below is a working sample with page numbers offset by 24. Run with dependencies: fs , pdf-merger-js and puppeteer .

 const puppeteer = require("puppeteer"); const PDFMerger = require('pdf-merger-js'); const fs = require("fs"); const footerTemplate = function (pageNumber) { return `<div style="font-size: 10px; display: flex; flex-direction: row; justify-content: space-between; width: 100%" id='template'> <div>Page number: ${pageNumber + 24}</div> </div>`; }; const mergePdfs = async function (totalPages, fileName) { var merger = new PDFMerger(); for (var pageNumber = 1; pageNumber < totalPages; pageNumber++) { await merger.add(`html-page-${pageNumber}.pdf`); } await merger.save(fileName); }; const cleanup = function (totalPages) { for (var pageNumber = 1; pageNumber < totalPages; pageNumber++) { var path = `html-page-${pageNumber}.pdf` fs.rmSync(path); } }; const printPage = function (pageNumber) { return { path: `html-page-${pageNumber}.pdf`, format: 'Letter', printBackground: true, displayHeaderFooter: true, footerTemplate: footerTemplate(pageNumber), pageRanges: String(pageNumber), margin: { top: '1in', right: '0in', bottom: '1in', left: '0in' } }; }; (async function () { const browser = await puppeteer.launch({ ignoreHTTPSErrors: true, dumpio: true, headless: true }); const page = await browser.newPage(); await page.goto('http://worrydream.com/KillMath/'); var pageNumber = 1; try { while (pageNumber > 0) { await page.pdf(printPage(pageNumber)); pageNumber += 1; } } catch (e) { await mergePdfs(pageNumber, 'html-page.pdf'); cleanup(pageNumber); } await browser.close(); })();

Answer 4

You can modify the first page number or execute JavaScript in the header or footer template of a webpage when using the Chrome DevTools Protocol's printToPDF method by using the headerTemplate and footerTemplate options. These options allow you to specify a string that will be used as the HTML template for the header and footer of the PDF.

To set the first page number, you can use the pageNumber option and set it to the desired number.

Here is an example of how you can use these options to modify the first page number and execute JavaScript in the header and footer templates:

const { CDP } = require('chrome-remote-interface');

(async function() {
    const client = await CDP();

    const { Page } = client;

    await Page.enable();

    // Define the header and footer templates
    const headerTemplate = `
        <div>
            <p>My custom header</p>
            <script>
                document.querySelector('p').innerHTML += ' - Page ' + document.querySelector('#pageNumber').textContent;
            </script>
        </div>
    `;

    const footerTemplate = `
        <div>
            <p>My custom footer</p>
            <script>
                document.querySelector('p').innerHTML += ' - Page ' + document.querySelector('#pageNumber').textContent;
            </script>
        </div>
    `;

    // Print the PDF
    const pdf = await Page.printToPDF({
        displayHeaderFooter: true,
        headerTemplate: headerTemplate,
        footerTemplate: footerTemplate,
        pageNumber: 1,
    });

    // Close the connection
    client.close();
})();

Note: This is just an example, you should replace the url and other options with the one you need.