search

YusukeIwaki / puppeteer-ruby

A Ruby port of Puppeteer
Apache License 2.0
284 stars 41 forks source link

Exporting page to pdf does not display custom header/footer template #323

Closed Jahija303 closed 9 months ago

Jahija303 commented 9 months ago

I am having issues setting custom header/footer using puppeteer-ruby. They do not display on the exported pdf file. I managed to do this in nodejs with puppeteer without any major issues. However, using the same configuration here does not seem to work.

Step To Reproduce / Observed behavior

  1. Launch a headless chrome and set custom html as page content
  2. Export page as pdf using custom options which set the header and footer template

Expected behavior

Exported pdf should display header and footer

Environment

Ubuntu 23.04 Chrome 117.0.5938.149-1 ruby 3.2.2 (2023-03-30 revision e51014f9c0) [x86_64-linux]

require "puppeteer"

def get_html
  <<-HTML
  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="utf-8"/>
    <title>Test Page</title>
    <meta content="width=1000px" name="viewport">
  </head>
  <body>
    <main>
      <section>
        <div class='text_content'>
          <h1>Test Headline</h1>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ac tincidunt vitae semper quis lectus nulla at. Ac turpis egestas integer eget aliquet. Tristique senectus et netus et malesuada fames ac. Urna nec tincidunt praesent semper feugiat nibh. Est velit egestas dui id. Convallis posuere morbi leo urna molestie at elementum eu. Purus ut faucibus pulvinar elementum integer enim neque volutpat. Faucibus nisl tincidunt eget nullam. Amet purus gravida quis blandit turpis cursus in hac. Commodo sed egestas egestas fringilla phasellus. In dictum non consectetur a erat nam at lectus.</p>
        </div>
      </section>
    </main>
  </body>
  </html>
  HTML
end

Puppeteer.launch(headless: "new", args: ["--no-sandbox"]) do |browser|
  page = browser.new_page
  page.set_content(get_html, wait_until: "load")
  page.emulate_media_type("print")
  page.pdf(
    {
      path: File.join(__dir__, "pdf", "output.pdf"),
      landscape: false,
      format: "A4",
      margin: {top: "3cm", right: "2cm", bottom: "3cm", left: "2cm"},
      displayHeaderFooter: true,
      headerTemplate: "<span style=\"font-size:10px;line-height:1.3;margin:0;\">Custom Header</span>",
      footerTemplate: "<span style=\"font-size:10px;line-height:1.3;margin:0;\">Custom Footer</span>"
    }
  )
end
Jahija303 commented 9 months ago

Update: the solution is pretty simple, I used camel case instead of snake case for the pdf configuration object. Making this small change fixes the issue for me.

  page.pdf(
    {
      path: File.join(__dir__, "pdf", "output.pdf"),
      landscape: false,
      format: "A4",
      margin: {top: "3cm", right: "2cm", bottom: "3cm", left: "2cm"},
      display_header_footer: true,
      header_template: "<span style=\"font-size:10px;color:#000000;line-height:1.3;margin:0;\">Custom Header</span>",
      footer_template: "<span style=\"font-size:10px;color:#000000;line-height:1.3;margin:0;\">Custom Footer</span>"
    }
  )