The CSS styles are not being applied to the header and footer sections in the PDF file created with

When I try to add a header and footer template to the PDF generated by puppeteer, I am facing an issue where the CSS I added is not being fully applied.

await page.pdf({
  path: filePath,
  format : 'A4',
  printBackground : true,
  margin : { top : 35, bottom: 45},
  displayHeaderFooter : true,
  headerTemplate : `
    <div style="height: 20px; display: flex; align-items: center; justify-content: space-between; font-size: 6px; font-family: Arial, Helvetica, sans-serif; letter-spacing: 0.5px;">
      <span class="date"></span>
      <span class="title"></span>
      <span class="pageNumber"></span>
    </div>`,
  footerTemplate : `<span class="pageNumber" style="font-size: 20px;"></span>`
})

In my browser tests, this HTML code provided the correct output. However, the font-size seemed off in the PDF compared to the browser rendering. For example, when I set font-size : 16px in the browser, it displayed perfectly, but in the PDF the font appeared too large.

I expected the justify-content property to work as intended, but unfortunately everything was aligned to the left side instead of spaced between elements.

Which CSS properties will the PDF generation respond to correctly?

htmlcssnode.jspuppeteer

Answer №1

It is recommended to include width: 100% in the style of the div element

<div style="width: 100%; display: flex; align-items: center; justify-content: space-between;">

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

Trouble getting proper alignment displayed with JavaScript and CSS

If anyone has a solution for printing content in a div using JavaScript and CSS, please help. The main div with the id 'preview' contains content taken from a database using PHP and MySQL. However, the data on the print page appears vertically an ...

javascriptphpcss

What is the best way to add color to the bottle's outline using clipPath?

How do I fill the background inside a bottle image with color? I have the coordinates for filling the bottle, but the background inside remains unfilled. .item { width: 150px; height: 150px; } #tubeLiquid { background-color: #74ccf4; clip-path ...

htmlcss

Is it possible for Stripe to verify the validity of a payment method?

In my app, users are prompted to input their payment method for future purchases. When they confirm their payment method, a question arises: Can Stripe determine the validity of the payment method and its available charge amount at that moment? Over tim ...

node.jsmongodbstripe-paymentsbackend

Troubleshooting jQuery Dropdown Menu Animation Bugs

Take a look at this interesting fiddle: https://jsfiddle.net/willbeeler/tfm8ohmw/ HTML: <a href="#" class="roll-btn">Press me! Roll me down and up again!</a> <ul class="roll-btns"> <li><a href="#" class="control animated noshow ...

javascriptjqueryhtmlcss

Steps for Exporting Objects to CSV with a Different Delimiter

Currently, I am working on a project that involves using MySQL and Node/Express to generate a CSV file. The output is successful, but the default delimiter being used is a comma. My goal is to change the delimiter to ^^ instead. I believe there may be a p ...

node.jsexpress

The alignment of the image in the Bootstrap dropdown menu is disrupted

Hello! Currently, I am utilizing this bootstrap template from . However, I am encountering an issue with the dropdown menu alignment when I try to add an image to it. Is there anyone who can provide some assistance with this problem? The complete code was ...

htmlcsstwitter-bootstrapbootstrap-4

The HTTP GET request in Express.js is throwing a 500 internal server error

I have implemented a GET API call to retrieve all users from my Logins database. However, I keep encountering 500 errors when making the request. Below is the code snippet I am using: const http = axios.create({ baseURL: "http://localhost:8080/api ...

javascriptnode.jsexpress

Error: The item is not a function - node.js / express

When running my node.js application, I encounter a Type Error: /Users/khinester/Sandboxes/zeitgeist/Blade/server.js:5 application = require("./.app/")(); ^ TypeError: object is not a function at Object.<anonymous ...

node.jsexpresscoffeescript

What is the process for making a local storage item accessible to others on a network?

Can a local storage item be accessed from any computer on the network using the same Google Chrome extension that was previously set up? ...

javascripthtmlgoogle-chromegoogle-chrome-extension

Step-by-step guide to applying a CSS class to a grid cell using Syncfusion

Is there a way to define a specific style for a cell using the Syncfusion grid grouping control? I attempted the code below, but it doesn't seem to be effective in my webform. tdescriptor.Columns[0].Appearance.AnyRecordFieldCell.CssClass = "hideColum ...

cssgridcellsyncfusion

limitation in bootstrap ensures that only one collapse element is open at any

Hey, can someone help me fix this code? I'm trying to make it so that only one element opens at a time, but I can't seem to figure out how. Right now, if I click on two elements, they both open and the other one doesn't close. This is what ...

javascripthtmlbootstrap-4

I encountered an issue where I cannot access the value of process.env.URI in my db.js file

I have been struggling with using a .env file to store my MongoDB URI and tried to use it in my db.js file. I have shared screenshots of the code below: db.js View db.js screenshot .env View .env screenshot Unfortunately, I keep encountering an error when ...

node.jsmongodbexpressuridotenv

Adapting designs within an Embedded Frame - JQuery

I am dealing with a dialog type popup that appears when a button is clicked by the user. Inside this popup, there is a form that needs to be submitted in order to change the width and height of the popup using the following code: $(document).ready(functio ...

javascriptjqueryhtmlcssiframe

Troubleshooting a dropdown selection problem in an HTML form

I've been working on simplifying a login form, which used to function properly when username and password were manually entered. Now, I'm looking to create a drop-down menu for the username field using data from a MySql database. Here is the cod ...

phphtmlmysql

Running multiple copies of the same Node.js application on AWS

Are there any options available on AWS for running multiple instances of the same node.js app? I've been trying to run several instances of my node.js app locally on my computer, but I keep encountering an EADDRINUSE error. By changing the port number ...

node.jsamazon-web-servicesmultiple-instances

"Unusual Error Encountered: Node, Promise, and Phantom.JS Not

I am currently utilizing Node and npm's phantom module to capture screenshots of multiple webpages. To optimize CPU usage, I allocate one Phantom instance per process. Within each instance, I open a webpage, render it, close it, and move on to the nex ...

node.jspromisephantomjsscreenshot

An effective way to prevent right-clicking on iframes across all websites

I am facing an issue with disabling right click for the iframe. I've successfully disabled it for the default URL of the IFrame, but when displaying any other webpage, the right click remains usable. Below are the sample codes I have used: document.o ...

javascriptjqueryhtmlcssasp.net

Exploring the differences between setting routes in Express using app.use() and app.get()

I have a website stub with routing set in two different places. First, in app.js: ... var index = require('./routes/index'); var users = require('./routes/users'); ... app.use(express.static(path.join(__dirname, 'public'))); ...

node.jsexpressroutes

Display MySQL data in a Jade/Pug view by separating it into different sections

Here is the code that generates a list of addresses from the database in the format "123 Hollywood Ave., Los Angeles, California". However, I only want to display 123 Hollywood Ave. I attempted splitting up the address using the split(',') method ...

javascriptnode.jsexpresspug

Tips on aligning multiple elements vertically in a justified manner

I'm struggling to articulate what I need, but I'll give it a shot. I want to vertically align three different elements, each wrapped in their own divs. This is my current code: .service_info { margin-top: 45px; clear: both; ...

htmlcssalignmentvertical-alignmentvertical-text