Ways to display page number in the header of a printed webpage

Hello everyone! This is my first time seeking help here, so I would appreciate any assistance in better understanding.

I am currently working on a project that involves creating computerized contracts for banks using HTML, which will then be converted into PDF format. My challenge lies in attempting to add page numbers to the header of each contract page using HTML and CSS tags. Unfortunately, the code I have tried does not seem to be producing any results. Here is the code snippet I have been using:

@page {  
    @bottom-right {    
        content: counter(page);
    }
    @bottom-center{
    white-space: pre;
    content:'Read and Accepted \A Signed';
  }margin:2cm;
}

However, this code is not functioning as intended at all.

Answer №1

This question has been previously addressed in a related thread. It appears that while browsers do support basic @page declaration features like sizing and margins, they do not currently support adding content to the margins with @bottom-right etc. This limitation has been noted in the Chromium bug list for almost a decade now, indicating that a resolution may not be imminent.

One suggested avenue to explore is pagedjs.org, as endorsed by both this response and this answer. Upon incorporating it into a test web page, I found it to function smoothly, although it does alter both the screen and print displays of the page. If this adjustment is acceptable for your needs, then you're all set!

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

Add a filter and set a background color on the rows in jqGrid

After analyzing the code and output in firebug, I can filter the td and assign a different background color based on certain conditions. Here is the code snippet: loadComplete: function() { var i, names=this.p.groupingView.sortnames[0], l = n ...

Misunderstandings between HTML and CSS

Can someone please clarify how the functionality of the active-slide class? Code: <div class="slider"> <div class="slide active-slide">..</div> <div class = "slide slide-feature">..</div> <div class = "slide">..</di ...

Utilizing Leaflet.js to dynamically incorporate layers through AJAX requests

I am currently facing an issue with my ASP.NET website that hosts a Leaflet map displaying data. I have implemented drop-down menus that trigger events through jQuery when changed. These events pass the selected values to a Web Service, which then retrieve ...

Verifying the numerical value of a decimal place

How can I determine if the 4th decimal place in a number is zero or not? I want to throw an error message if it is not zero. For instance, in the number 2.3189, the value of the 4th decimal place is 9. My current code works for most cases, but for exampl ...

Trigger a function following a collection update in Angular Meteor

I am in the process of developing a multiplayer game, and I would like a specific function to be triggered once the first player updates an "isStarted" field in the collection. Within my controller code: angular.module('mcitygame').directive(&a ...

What is the best way to incorporate an image into an element to maximize the available space?

How can I enlarge the image to fully occupy the space available in an element block, similar to the following image: (the black box represents the element box and the grey area is supposed to be the image.) https://i.sstatic.net/F0E82.png In the current c ...

Verifying if a dropdown option has been chosen through validation in JavaScript

Currently, I am working on implementing a validation block in my JavaScript code to ensure that users have selected a value before proceeding. If a value is not selected, I want to display a pop-up message prompting them to do so. function validate(form) ...

The CSS performs perfectly in IE9 but displays completely disorganized in IE8

I am facing issues with my CSS styles in IE8, specifically with border radius and background gradients, as well as the size of the container. I have tried using CSS PIE to fix it, but that also didn't work. If anyone has any suggestions or solutions, ...

Exploring the power of directives in AngularJS for dynamically manipulating the

Using angular directives, I am attempting to dynamically replace a portion of HTML within a portlet on a webpage. The portlet contains two embedded sections. The top section includes a heading obtained from a separate backend service. <div class="head ...

The rendered typeface may vary from the specified font family

I've encountered an issue with a font on my website. I'm using DIN Regular True Type Font and declaring it as follows: @font-face { font-family: 'DINRegular'; src: url('../fonts/DINBek-Regular.ttf') format('truetype ...

The React application is experiencing difficulty in rendering SVG images exclusively on Windows operating systems

My react app runs smoothly on OSX, but encounters issues on Windows due to SVG files: Module parse failed: Unexpected token (2:0) You may need an appropriate loader to handle this file type. <svg xmlns="http://www.w3.org/2000/svg" viewBox="..."> I ...

Problem with sending JSON-encoded arrays to an API

After successfully connecting to an API via Postman, I encountered an issue with my AJAX call. The error message returned is: Object {status: false, message: "Add amenities in JSON string"} The problem seems to be related to the amenities parameter, as ...

Problem with jQuery's UI autocomplete functionality

Implementing jQ UI Autocomplete with multiple values Below is how my function is structured: mailto_input.bind( "keydown", function( event ) { if ( event.keyCode === $.ui.keyCode.TAB && $( this ).data( "autocomplete" ).menu.active ) { ...

Refresh the image source using the AJAX success callback

Previously, I was updating Label values within the AJAX success function as shown below. Now, I am looking for a way to use the same method to change or update the "src" attribute of an <img id="myimage" src=""/> $.ajax({ url: 'clmcontrol_l ...

Executing the collection.find() function triggers an internal server issue and eventually leads to a timeout error

My ExpressJS backend was running smoothly with hardcoded data, but when I integrated MongoDB into the system, my requests for data started timing out. I added a record to a collection using the command prompt: > db stackmailer > db.sites.find() { ...

Updating table width using AngularJS/jQuery after completion of ajax request

One of my challenges involves a table that defaults to a specific width, such as 80% of its parent div. Initially, the table remains hidden using 'ng-if' until an ajax call is completed in this manner: This is reflected in the HTML code snippet ...

The POST request is not functioning. An error has occurred: Unable to retrieve response data - no content is available for the preflight request

Having trouble making a post request from my client side to the back-end. Even with the new movie hardcoded, it keeps returning an error stating that there was a failure in loading the response data. Below is the code for the front-end: //Fetch request t ...

ASP.NET is failing to receive Request.Files, returning null instead

I am attempting to upload an Excel file using XMLHttpRequest and FormData in ASP.NET, but I keep encountering the issue of Request.Files being null in ASP.NET. Below is the code I am using - can someone please assist me with this? function BulkUploadUse ...

ignore current index in for loop

I am currently facing an issue with an if statement inside a for loop. The scenario involves retrieving a list of files from the directory filesSAS, iterating through each one, and converting them from csv to JSON. After conversion, I check if the output ...

How can I trigger a function once ng-show has finished executing?

I have an HTML table and buttons with the attribute ng-show=some_property. What I am trying to achieve is: I want Button1 to reveal a table containing field1, and I would like to change the focus directly from Button1 to field1. However, I am encounterin ...