Turn off Chrome's standard headers and footers when printing to PDF in headless mode

I have encountered a challenge with exporting a multipage HTML document to PDF using headless Google Chrome / Chromium from the command line. The issue arises when Chrome automatically adds headers and footers during the "printing" process. Although some have suggested using @page {margin: 0} in CSS to remove them, this solution only seems to work for a limited number of pages, resulting in a footer appearing on the last page of the example.

While there is an NPM package available that supports header-free exports, it comes at the cost of taking approximately 30% more time than utilizing headless Chrome directly. Additionally, implementing NPM and the package on our company's servers would be necessary.

If anyone has insights on how to hide Google Chrome's default headers and footers during headless PDF-export using CSS or settings adjustments, I would greatly appreciate any guidance shared.


In the absence of an alternative solution, I opted for the NPM package. While it has proven to be effective and reliable thus far, it does require additional time compared to using headless Chrome alone, so this aspect should be taken into consideration.

Answer №1

If you're using Google Chrome, there is a handy option available: --no-pdf-header-footer (or --print-to-pdf-no-header for older Chrome versions).

canary \
  --headless \
  --disable-gpu \
  --run-all-compositor-stages-before-draw \
  --no-pdf-header-footer \
  --print-to-pdf-no-header \
  --print-to-pdf=example.pdf \
  http://example.com

For more information on this topic, visit https://developer.chrome.com/docs/chromium/new-headless

Answer №2

If you're looking for assistance, you might find some valuable information in this forum thread. Essentially, the solution involves implementing the following CSS:

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

Additionally, make sure to include the "--no-margins" parameter.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Acquiring the underlying code of websites within the local network

In the tool I am creating, it takes a URL as a parameter and retrieves the source code from that URL for analysis. The tool will be hosted on our domain, with the capability of analyzing web pages of sites within our internal network domain. Here is the Jq ...

What is the process for inspecting the element within a div using jsname with JS?

Struggling to inspect elements within a DIV without using xpath. // Assert.assertEquals("Digite uma senha",driver.findElement(By.xpath("//*[@id=\"view_container\"]/div/div/div[2]/div/div[1]/div/form/span/section/div/div/div[1]/div[2]/div[2] ...

AngularJS: intercepting custom 404 errors - handling responses containing URLs

Within my application, I have implemented an interceptor to handle any HTTP response errors. Here is a snippet of how it looks: var response = function(response) { if(response.config.url.indexOf('?page=') > -1) { skipException = true; ...

I am wondering how to use the value assigned to a variable's textContent as an argument for player input in my JavaScript code

i am currently developing a JavaScript project to create a user interface for my rock, paper, scissors game. Currently, the game only runs in the console and prompts the player for input. So far, I have implemented three buttons (one each for rock, paper, ...

What is the best way to include additional text in my scroll-to-top button that already features an icon?

I'm completely new to this industry, so I could really use some assistance. Despite trying every possible solution, nothing seems to be working for me. Currently, I am looking to add some text to my scroll-to-top button, which already exists with an ...

Enhanced Custom Code Highlighting for Aptana Studio 3 with support for .less files

Looking to enhance syntax highlighting for .less files in Aptana Studio 3 but struggling to find a solution. XText only works with Eclipse, and the forums offer limited guidance. Has anyone successfully implemented custom syntax highlighting for .less fi ...

Hovering over graphics for automatic scrolling

I have successfully implemented a hover effect that scrolls down an image inside a div. However, I am facing an issue with making the scroll longer for images of varying lengths by using calc inside the transition property. Below is the code snippet that ...

Align navigation items in the center of the navigation container

I've been grappling with aligning the content of a nav-item inside a nav container in my project. I'm unable to apply a margin on the ul>li items as it doesn't adjust properly on different resolutions. I've tried using percentages, b ...

Disorganized eCommerce Fee Box tabs causing confusion

I'm struggling to understand why this feature isn't working correctly on my website. It's supposed to generate a box with text and fee information, utilizing custom product fields for the fees. However, the tabs seem to be missing and the ta ...

CSS Show a Cropped and Resized Image - The Saga Continues

Continuing from a previous discussion on CSS Display an Image Resized and Cropped, I am in need of further assistance to enhance the existing solution provided by a fellow user... Question: How can we dynamically resize (scale) the image based on its orig ...

Creating a dynamic hyperlink variable that updates based on user input

I am attempting to create a dynamic mailto: link that changes based on user input from a text field and button click. I have successfully achieved this without using the href attribute, but I am encountering issues when trying to set it with the href attr ...

Creating a great user experience with Knockout JS and Bootstrap Modal

I created a straightforward webpage with a button that triggers the opening of a modal. You can view all my code in this JSFiddle: JS Fiddle Also provided below: $('#displayDetails').click(() => { let obj = { Overview: ' ...

Retrieve the value of a dynamically added or removed input field in JQuery using Javascript

Check out this informative article here I'm looking for a way to gather the values from all the text boxes and store them in an array within my JavaScript form. I attempted to enclose it in a form, but I'm struggling to retrieve the HTML ID beca ...

Is there a way to showcase the content of a text file in a sequential manner using Javascript/AJAX?

I am attempting to retrieve text data from a server file and exhibit it within a specific division on my website. Check out the AJAX/Javascript code I have been working with: <body onload="loadXMLDoc()"> <script> function loadX ...

Get PDFs using Python's Selenium, then store them with custom filenames

Our goal is to scrape a multitude of PDFs for various companies and save them with their respective company names, all sourced from . Although my current code successfully downloads the PDFs, I am facing an issue when it comes to saving them with the comp ...

How can I create a carousel-style container in HTML that functions similarly to the one on Upwork?

Is there a way to transform my existing container into a carousel similar to the one on Upwork? https://i.sstatic.net/dJZjy.png I am looking to convert my current layout into a carousel, just like the example image provided: .flex-container { displa ...

What are some creative ways to incorporate a variety of images into my website?

Currently working on a webpage and running into an issue. I have a div called "background" where I am loading several images using the <img>-tag. The problem is that the images are set to float:left;, causing them to wrap onto a new line as they can& ...

IItemTransform and minified files that are already in use

Summary: IItemTransform is not triggered when a minified file already exists in the same directory as the original (non-minified) file. Issue Description The problem arises due to CSS relative image references, impacting both JavaScript and CSS files when ...

Safari adds .html to the end of headers when downloading a PDF

The following are the headers for a request and response: http://www.example.com/get/pdf GET /~get/pdf HTTP/1.1 Host: www.example.com User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.6; en-US; rv:1.9.2.3) Gecko/20100401 Firefox/3.6.3 Accept: text ...

Developing a progress bar with jQuery and Cascading Style Sheets (

Below is the code I'm currently using: <progress id="amount" value="0" max="100"></progress> Here is the JavaScript snippet I have implemented: <script> for (var i = 0; i < 240; i++) { setTimeout(function () { // this repre ...