Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Background image does not work. #125

Closed
gilderlan opened this issue Aug 23, 2021 · 10 comments
Closed

Background image does not work. #125

gilderlan opened this issue Aug 23, 2021 · 10 comments

Comments

@gilderlan
Copy link

I need to generate a simple pdf with a background image and get the base64 code.

My code:

Grover.configure do |config|
  config.options = {
    format: 'A4',
    timeout: 0,
    emulate_media: 'screen',
    launch_args: ['--no-sandbox', '--disable-setuid-sandbox'],
    print_background: true
  }
end

html = %Q{
  <html>
    <head>
      <meta charset='UTF-8'>
      <style>
        body {
          background-image: url(http://img.freepik.com/free-vector/white-abstract-background_23-2148810113.jpg);
          background-repeat-y: repeat-y;
          background-position: center center;
          background-attachment: fixed;
          background-size: 100%;
          min-height: 600px;
        }
      </style>
    </head>
    <body>
      <h1>Teste</h1>
    </body>
  </html>
}

pdf = Grover.new(html).to_pdf
Base64.encode64(pdf)

The resulting pdf does not have a background image.

image
@abrom
Copy link
Contributor

abrom commented Aug 23, 2021

Have you tried telling the browser to force printing the background? ie -webkit-print-color-adjust

@media print {
  -webkit-print-color-adjust: exact;
}

@abrom
Copy link
Contributor

abrom commented Aug 23, 2021

Oops.. i see you've set your media emulation to screen. You should be able to just add this (without the media tag) to your body style definition

@gilderlan
Copy link
Author

I tried some suggestions, nothing works. Removing the emulate media option, adding media print style ...

@abrom
Copy link
Contributor

abrom commented Aug 25, 2021

Have you tried enabling the raise_on_request_failure: true option?

Have you tried any debugging? https://github.com/Studiosity/grover#debugging

@gilderlan
Copy link
Author

I configured raise_on_request_failure but it didn't work. When I activate debug mode, it opens and closes the chromium immediately.

@abrom
Copy link
Contributor

abrom commented Aug 26, 2021

Can you confirm the puppeteer/grover versions installed?

@gilderlan
Copy link
Author

puppeteer: 10.2.0
grover: 1.0.2

@abrom
Copy link
Contributor

abrom commented Aug 27, 2021

Ok that likely explains it. There is an issue introduced in puppeteer 10.2.0 that broke asset rendering in grover. You can either downgrade puppeteer to 10.1.0 or upgrade grover to 1.0.3

See #122

@emilianodellacasa
Copy link

These are the versions I am using now:

peppeteer: 10.4.0
grover: 1.0.6

Can confirm the issue still exists

@abrom
Copy link
Contributor

abrom commented Oct 27, 2021

Can you elaborate @emilianodellacasa ? How are you testing this? I just ran the test as described by @gilderlan above and it works just fine 😉

Screen Shot 2021-10-27 at 7 07 52 pm

@abrom abrom closed this as completed Jan 29, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@gilderlan @emilianodellacasa @abrom