Tips for inserting a footer at the bottom of every page during the conversion process from HTML to PDF

Could use some assistance with converting HTML into a PDF report. In particular, I want the footer to always appear at the bottom of the last page, even if there is minimal content on that page. Any suggestions?

I've been utilizing the wkhtmltopdf tool for the conversion process and have been scouring for solutions. So far, the only one I could locate involves using the following code:

    body{
    position:releative;
    }
    
    footer{
    position:absolute;
    bottom:0;
    right:0;
    float:right;
    }

This approach places the footer on the bottom of the first page, but what I'm aiming for is having it consistently at the bottom of the last page.

Your help would be greatly appreciated!

Answer №1

For your PDF generation needs, I suggest utilizing TCPDF. You can find an example of how to use it here.

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

nodejs express routing issue resulting in not found error

I recently started a new node project and wanted to enhance my route adding capabilities. In the past, I only went one level deep with folders, but this time I wanted to go further. To achieve this, I created a recursive function that adds routes and navig ...

What methods can be used to customize the font and background color of a website for different user groups?

Trying to incorporate a template into my project. My client has requested the following: The regular user area should feature a blue background. The professional user area should have an orange background. Is there a way to set up a condition to change ...

What is the process of extracting multiple attributes from an object that has been selected by a user using mat-options (dropdown list) in Angular?

Summary: A dropdown list contains objects, unsure how to capture multiple attributes of selected object. Current Implementation: I have successfully created a dropdown list that displays the details of an object retrieved through an API call: <mat-f ...

Creating a back button for returning to the previous page

I have created an Angular application that retrieves data from an API. However, I am facing an issue where the data is lost when navigating to another route and then returning to the table route. Is there a way to switch routes without losing the data? &l ...

Only retrieve links that don't have the specified class by using regular expressions

I am trying to extract all links from an HTML document using REGEX, except for those with a specific class name. For example: <a href="someSite" class="className">qwe</a> <a href="someSite">qwe</a> My goal is to only capture the ...

Issue TS2365: The operation of addition cannot be performed between an array of numbers and the value -1000

I'm encountering an error in my ng serve logs despite the function functioning properly with no issues. However, I am concerned as this may pose a problem when building for production. How can I resolve this error? uuidv4() { return ([1e7]+-1e3+- ...

Using absolute positioning on elements can result in the page zooming out

While this answer may seem obvious, I have been unable to find any similar solutions online. The problem lies with my responsive navbar, which functions perfectly on larger screens. However, on mobile devices, the entire website appears zoomed out like thi ...

The height of the ion-textarea in Ionic-angular reduces

I've been working on a project using the ionic-angular framework. I've encountered an issue where the height of the ion-textarea is sometimes decreased to 0px. The code for the textarea looks like this: <ion-textarea class="translated&quo ...

The JavaScript Discord Bot is having trouble connecting to a voice channel

I'm currently working on developing a discord bot using node.js. While I've successfully set it up to respond, I'm facing an issue with summoning it to a voice channel. Here is the snippet of code I am working with: switch (args[0]) { c ...

Leveraging the power of Bootstrap 4 to place the footer beneath all remaining content on the

I am currently working on a React application that consists of a header, container, and footer. To add animation to the route loading process, I had to apply position: absolute to the container section of the page. Within the container, there is a row wit ...

Using the Map function in Angular, you can generate a fresh array by combining elements from two existing

Is there a smart way to combine data from 2 arrays and create a new array? var employees1 = [ { id: 11, name: 'joe' }, { id: 12, name: 'mike' }, { id: 13, name: 'mary' }, { id: 14, name: 'anne' } ]; var em ...

I have noticed that the SVG viewBox appears different when using Vue.js

I cannot wrap my head around the fact that my svg viewBox acts differently in html compared to vuejs. Here is my code in vue: <template> <div class="venuecontainer" style="background-color:#808040;"> <svg class=&quo ...

Assign characteristics to the button, however it will only activate after being clicked twice

The button I created with some bootstrap attributes is not working properly on the first click. To resolve this, I initially called the function in onload and then again on the button click. However, I am now unable to do so and am seeking alternative solu ...

Dynamic SVG circles with timer and progress animation

Is there a way to modify the following: var el = document.getElementById('graph'); // get canvas var options = { percent: el.getAttribute('data-percent') || 25, size: el.getAttribute('data-size') || 220, lineW ...

Is there a standardized method for obtaining a date in the format of six digits as YYMMDD?

In my current project, I'm developing a function that generates a list of dates represented in a 6-digit format beginning from the present day up until August of 2018. The desired output should resemble the following: [190322, 190321, 190320, ...] I ...

Vue: Clear the current form selection with a button click

<b-row class="mb-3"> <b-col> <div class="float-right"> <b-form-select v-model="selected" :options="options" ></b-form-select> ...

Adjust the active carousel item to 0 within onsen-ui (displaying a list of carousel items in a sliding menu)

In my sliding menu, each menu item contains a carousel with two items. I am trying to make the first carousel item show after closing and reopening the menu, or by clicking a button outside of the list on the menu page. This is my current setup: <ons- ...

Encountered an error while trying to start the server on port 9876: Permission denied (Error: EACCES) while running Angular Unit Tests using the command 'ng test'

While running my Unit Tests in watch mode, Chrome abruptly closed, preventing me from being able to run 'ng test' anymore. This is a situation that has never happened before during the past year of working on these tests. The issue I encountered ...

Having trouble locating and scrolling through elements while webscraping with Python Selenium, encountering the 'cannot focus element' error

I have been trying to extract ticket information from the VividSeats website. The URL I am working with is '' My tools of choice are Selenium and Python. I managed to navigate to the page using Chrome WebDriver and interact with the pop-up tha ...

How can I personalize the color of a Material UI button?

Having trouble changing button colors in Material UI (v1). Is there a way to adjust the theme to mimic Bootstrap, allowing me to simply use "btn-danger" for red, "btn-success" for green...? I attempted using a custom className, but it's not function ...