Set background image and/or color in Header and Footer in Page.printToPDF

[ziggy]

I am trying to set background image and/or background color but it doesn't work for me.

I am using the chrome-headless-render-pdf application from:

https://github.com/Szpadel/chrome-headless-render-pdf

I am able to inject title, date, url, pageNumebr and totalPages into headre and footer.

Can anyone help?

Included and attached the bash script below:

#!/bin/bash

# Footer layout: [pageNumber / totalPages]
footerTemplate='
<style type="text/css">
.footer-background {
background-image: url("https://homepages.cae.wisc.edu/~ece533/images/airplane.png");
background-size: cover;
background-color: red;
background-position: center;
width:100%;
padding-left:0.3in;
padding-right:0.3in;
}
.footer-right {
width:100%;
margin-right:0.3in;
direction: ltr;
white-space:nowrap;
overflow:hidden;
text-overflow:clip;
text-align:right;
font-size:10px;
background-color: red;
}
</style>
<div class="footer-background">
<div class="footer-right"><span class="pageNumber"></span> / <span class="totalPages"></span></div>
</div>
'

# Header layout: [date][title]
headerTemplate='
<style type="text/css">
.header-left {
width:14%;
margin-left:0.3in;
direction:ltr;
white-space:nowrap;
overflow:hidden;
text-overflow:clip;
text-align:left;
font-size:10px;
}
.header-right {
width:86%;
margin-right:0.3in;
direction: ltr;
white-space:nowrap;
overflow:hidden;
text-overflow:clip;
text-align:center;
font-size:10px;
}
</style>
<div class="header-left"><span class="date"></span></div><div class="header-right"><span class="title"></span><div>
'

# Optional: join lines
#headerTemplate=${headerTemplate//$'\n'/}
#footerTemplate=${footerTemplate//$'\n'/}

url='https://www.google.com'

set -x
node.exe chrome-headless-render-pdf.js --url "$url" --pdf test.pdf --display-header-footer --header-template "$headerTemplate" --footer-template "$footerTemplate"

[ziggy]

For some reason, it takes forever to see my posts and replies to my posts on the chromium-dev. Decide to reply from gmail.

Thanks for the suggestion. However, the --include-background is set to true by default. To make sure, I set "--include-background true" but it didn't help. Next, I set "--include-background false" on the command line and the background color was not printed on the main page content.

Also tried the following:

<div class="footer-background"><span></span></div><div class="footer-right"><span class="pageNumber"></span> / <span class="totalPages"></span></div>

instead of:

<div class="footer-background">
<div class="footer-right"><span class="pageNumber"></span> / <span class="totalPages"></span></div>
</div>

but it didn't help.

If you have any other suggestions, I will try and let you know.

On Fri, May 7, 2021 at 3:00 PM Philip Rogers <p...@google.com> wrote:

did you pass --include-background?

--
--
Chromium Developers mailing list: chromi...@chromium.org
View archives, change email options, or unsubscribe:
http://groups.google.com/a/chromium.org/group/chromium-dev
---
You received this message because you are subscribed to the Google Groups "Chromium-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to chromium-dev...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/chromium-dev/9d393051-be9f-48f6-a1ca-b3dc55338d73n%40chromium.org.

[ziggy]

Can any one point me to the source code that is processing header and footer templates specified to Page.printToPDF ?

[ziggy]

Ok, I found the related source code as below.  ExecuteScript() seem to call some blink functions. 

Problem seems to with the blink but without deep understanding of the blink, this only a guess at this point.

Need the expert help at this point.

chromium\src\components\printing\renderer\print_render_frame_helper.cc

const char kPageSetupScriptFormat[] = "setupHeaderFooterTemplate(%s);";

void PrintRenderFrameHelper::PrintHeaderAndFooter()
{

..........

  ExecuteScript(frame, kPageSetupScriptFormat, *options);

  blink::WebPrintParams webkit_params(page_size);
  webkit_params.printer_dpi = GetDPI(params);

  frame->PrintBegin(webkit_params, blink::WebNode());
  frame->PrintPage(0, canvas);
  frame->PrintEnd();

}

chromium\src\third_party\blink\renderer\core\frame\web_local_frame_impl.cc

[ziggy]

Could not identify OWNERS and/or experts on printing header and footer into PDF.

Looking to clarify whether support for background image and/or background color is supported in the footer and header.

Already tried various header and footer templates and it doesn't seem to work but it doesn't mean necessarily that the  background images and/or colors are not supported.

Can anyone help?

[ziggy]

Hi Pavel,

I downloaded chromium source with the full history and found out that you are the author of the option to specify header and footer templates in headless printing.

Hope you find time to clarify whether the background-image, background-color, etc properties are supported in the header and footer.

I tried various header and footer templates and was able to inject documented 'date', 'title', 'url', 'pageNumber', 'totalPages' classes and plain text but not the background-image and related  properties. See example  in my initial  messages.

Regards,

Zbigniew

[ziggy]

Can anyone help or suggest to post the question to different group if appropriate.

[K. Moon]

Maybe you can ask the author of chrome-headless-render-pdf? That tool isn't an official Chromium project or anything, while this mailing list is for discussing Chromium development.

Puppeteer seems to do something similar, and you might have better luck searching for an answer involving that system. I hear Playwright (https://playwright.dev/) is sorta a newer version of Puppeteer.

There may well be some sort of Chromium API limitation underneath, but hopefully someone else has run into the same problem before to help narrow it down, instead of spending a lot of time trying to debug the problem.

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/chromium-dev/054bede0-4e24-4e8e-b863-f7d0bd25fe5en%40chromium.org.

[ziggy]

Thanks for suggestions. Based on results of my investigation, it is not likely problem is with the chrome-headless-render-pdf java tool. The chrome-headless-render-pdf  relies on the chrome-remote-interface  npm package that implements CDP  protocol. The chrome-remote-interface  connects to Chrome remote debugging port, loads the page, populates print to pdf CDP method and forwards to Chrome.  I did set the break point in void PrintRenderFrameHelper::PrintHeaderAndFooter()  and all internal structures for rendering  seem to be set properly.   It is possible that printing of the header and footer implement subset of HTML only. Problem is that debugging of the rendering is beyond my level of expertise. -:). I would expect that Puppeteer will have the same issue but I did not test this.

[K. Moon]

Yes, that sounds plausible. It might be useful to file a feature request or bug report at this point (although see if you can find a similar report first).