Alter The Default Header/footer When Printing To Pdf

April 19, 2024 Post a Comment

I'm trying to use Google Chrome as a replacement of PhantomJS to render HTML into PDF. So far it's been working well for me. The only issue I have that I have not found any way to

Solution 1:

This is an update/answer to the question. As of Chromium 64 it is possible using the headerTemplate and footerTemplate parameters to printToPDF

Using chrome remote interface here's example code that should work:

returnnewPromise(asyncfunction (resolve, reject) {
    const url = "<MyURL here>";
    const [tab] = awaitCdp.List()
    const client = awaitCdp({ host: '127.0.0.1', target: tab });
    awaitPromise.all([
       Network.enable(),
       Page.enable()
    ]);

    Page.loadEventFired(function () { 
         setTimeout(function () {
    //https://chromedevtools.github.io/devtools-protocol/tot/Page/#method-printToPDFresolve(Page.printToPDF({
                  displayHeaderFooter:true,
                  footerTemplate: "<span class='pageNumber'> of <span class='totalPages'>"
             }))); 
         }, 3000);
    });
    awaitPage.navigate({ url }); 
};

Solution 2:

It is possible to create custom headers and footer by using <header> and <footer> tags. I use this for generating PDF's using Chrome Headless. I have not tested it in Firefox, IE etc...

<header>
  Custom Header
  <imgsrc="http://imageurl.com/image.jpg"/></header><divclass="content">Page Content - as long as you want</div><footer>
  Footer Content
</footer>

the CSS

@page {
  margin: 0;
}
@media print {
  footer {
    position: fixed;
    bottom: 0;
  }
  header {
    position: fixed;
    top: 0;
  }
}

The @page { margin: 0 } removes the default header and footer.

Hope this helps.

Solution 3:

There are two solutions to your problem

A) Push the chrome-header out by leaving no margin :

@page { 
     margin: 0;
     size: auto;
 }

@media print {
   @page { margin: 0; }
   body { margin: 1.6cm; }
 }

B) Originally a Firefox solution which should world for Chrome

 <html moznomarginboxes mozdisallowselectionprint>

some sample:

<!DOCTYPE html><htmlmoznomarginboxesmozdisallowselectionprint><head><title>Print PDF without header</title><style>@media print {
    @page { margin: 0; }
    body { margin: 1.6cm; }
}
</style></head><body><p>Some Text in Paragraph to print!</p><ahref="javascript:print()">Print</a></body></html>

Solution 4:

Update

You can use the headerTemplate and footerTemaplate parameters in printToPDF to customize the header and footer when printing to PDF.

Baca Juga

headerTemplate and footerTemaplate accept valid HTML markup, and you can use the following classes to inject printing values into your HTML elements:

date - will inject the current date in printable format into the HTML element containing the class
title - document title
url - document location
pageNumber - current page number
totalPages - total number of pages

For example, to print the page number and total number of pages:

Page.printToPDF({
    displayHeaderFooter: true,
    footerTemplate: "<spanclass='pageNumber'></span><span>out of</span><spanclass='totalPages'></span>"
})

Original

(At the time, this was not possible to achieve with Chrome DevTools.)

According to this forum, there is currently no way to do this in google chrome. All you can do is turn the header/footer on or off. This is indicated by the comment:

Currently there isn't a way to edit the header when printing a document. You can currently only turn the header and footer on or off which includes the date, name of the web page, the page URL and how many pages the document you're printing. You may want to check out the Chrome Web Store to see if there are any handy third party extensions that you can install on Chrome that may fit what you're looking for in terms of printing -- SourceThere may be third-party extensions to get the functionality you are looking for, or as you suggest, you can use JavaScript to append the elements you want to print.

Solution 5:

If you really want to do this in a non-hacky way, you have to get down to the chrome devtools protocol since the command line interface doesn't support much (aka --print-to-pdf is all you get, no print options)

The protocol is documented here: https://chromedevtools.github.io/devtools-protocol/tot

Client libraries are available in many languages, available via package managers.

Here's some examples I put together to demonstrate usage:

The Page.printToPDF protocol method supports arguments for passing custom markup for header and footer.

Basically, the protocol is defined in a protocol.json, which client libraries consume to generate the classes/methods for use in any application. These methods encapsulate the lower level communications with the protocol.

All I had to do was install a client library package (via npm or composer), make sure chrome was installed, write a little code, and I'm generating pdfs with no header/footer! Fantastic.

JavaScript Sample