Lightrun
question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Scripts are not evalutated in header and footer HTML templates for PDFs.

See original GitHub issue

Steps to reproduce

  • Puppeteer version: 1.1.1
  • Platform / OS version: Windows 10, version 1709, build 16299.248
  • Node.js version: v7.9.0

What steps will reproduce the problem?

First, I setup a basic test page like this:

const browser = await puppeteer.launch({ignoreHTTPSErrors: true})
const page = await browser.newPage()
await page.setContent(`
<html>
  <head>
    <title>Test Page</title>
    <style>
      body{
        background: yellow;
        min-height: 6000px;
      }
    </style>
  </head>
  <body>
    I'm an HTML page.
  </body>
</html>
`)
const pdf = await page.pdf({
  format: 'Letter',
  printBackground: true,
  headerTemplate: headerTemplate,
  displayHeaderFooter: true,
  margin: {
    top: '1in',
    right: '0in',
    bottom: '1in',
    left: '0in'
  }
})
await browser.close()

The headerTemplate looks like this:

const headerTemplate = `
<div style="font-size: 10px; display: flex; flex-direction: row; justify-content: space-between; width: 100%" id='template'>
  <div class='pageNumber' id='num' style="font-size: 10px;">Page number</div>
  <div class='date' style="font-size: 10px;"></div>
  <div class='title' style="font-size: 10px;"></div>
  <div class='url' style="font-size: 10px;"></div>
  <div class='totalPages' style="font-size: 10px;"></div>
  <script>
    var pageNum = document.getElementById("num");
    pageNum.remove()
    var template = document.getElementById("template")
    template.style.background = 'red';
  </script>
</div>`

What is the expected result? The docs don’t mention whether or not script tags are supported in the header and footer templates. I would expect then that the code above would render a header with a red background and remove the page number node. (The code above was just for testing purposes).

What happens instead? The script appears not to evaluate. Instead the resulting PDF has no background, and a page number div.

If evaluating scripts in these templates is not supported, might I suggest updating the PDF section of the docs to state as much. Thanks for all the hard work the Puppeteer team has put into this project!

Issue Analytics

  • State:open
  • Created 6 years ago
  • Reactions:57
  • Comments:27

github_iconTop GitHub Comments

30reactions
yale8848commented, Sep 28, 2018

this is chromium source code print_header_footer_template_page.html

https://cs.chromium.org/chromium/src/components/printing/resources/print_header_footer_template_page.html

function setup(options) {
  const body = document.querySelector('body');
  const header = document.querySelector('#header');
  const footer = document.querySelector('#footer');

  body.style.width = `${options.width}px`;
  body.style.height = `${options.height}px`;
  header.style.height = `${options.topMargin}px`;
  footer.style.height = `${options.bottomMargin}px`;

  header.innerHTML = options['headerTemplate'] || `
    <div class='date text left'></div>
    <div class='title text center'></div>`;
  footer.innerHTML = options['footerTemplate'] || `
    <div class='url text left grow'></div>
    <div class='text right'>
      <span class='pageNumber'></span>/<span class='totalPages'></span>
    </div>`;

  options.date = new Date(options.date).toLocaleDateString();
  for (const cssClass of ['date', 'title', 'url', 'pageNumber', 'totalPages']) {
    for (const element of document.querySelectorAll(`.${cssClass}`))
      element.textContent = options[cssClass];
  }
}

headerTemplate and footerTemplate content was used innerHTML method to render , so it can’t execute JavaScript, but we can use other method to execute javascript, we can use under code:

    <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>

the result is js modify test color to green.

header

9reactions
luxueyancommented, Aug 22, 2019

I hate so many trick hacks！I need the headerrTemplate/ footerTemplate can support function setting.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Puppeteer Header and Footer not displayed on first page
NOTE headerTemplate and footerTemplate markup have the following limitations: Script tags inside templates are not evaluated.
Read more >
Document Template: Dynamic Header and Footers
Solution: The HTML documents can have CSS scripts in them. We can use it to our advantage to introduce the dynamic header and...
Read more >
Add headers, footers, and Bates numbering to PDFs
Follow these steps to add headers, footers, and Bates numbering to PDFs using Acrobat. They can include a date, page numbers, title, author, ......
Read more >
Phantom pdf recipe - jsreport
The Phantom-pdf recipe is capable of rendering any HTML and JavaScript you ... The header and footer are evaluated as if they were...
Read more >
Pandoc User's Guide
Produce output with an appropriate header and footer (e.g. a standalone HTML, LaTeX, TEI, or RTF file, not a fragment). This option is...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found
Previous page

Failed to download Chromium r536395! Set "PUPPETEER_SKIP_CHROMIUM_DOWNLOAD" env variable to skip download.

Next page

"Navigation Timeout Exceeded" error when setting headless flag to true, works with false.