Creating a dynamic page footer for a PDF document using Rotativa's content generation capabilities

As I work on generating a PDF, my employer has requested that I add a footer to each page of the document. Currently, the PDF is being created using Rotativa, where an HTML page is converted into a PDF.

However, I am facing a challenge in determining the best way to achieve this. I have considered various options, including plain CSS code, but none of them seem to be working effectively for me. This is particularly true because the number of pages in the PDF can vary - it could be just one page or as many as ten pages, depending on the content that needs to be included.

Therefore, the footer needs to adapt and be responsive to the number of pages generated.

If anyone has any ideas or suggestions on how I can accomplish this task, I would greatly appreciate it. I am eager to resolve this issue, but I am currently at a loss for how to proceed.

Thank you in advance for your help.

Best regards, Lorenzo Otto

c#htmljquerycssrotativa

Answer №1

If I understand correctly, you can use an HTML page as a footer to show the page number and total number of pages using some javascript. I have implemented this method in several web applications that generate PDF files with dynamic content.

Let's say we create a file called Footer.html for the PDF footer, here is an example HTML file with javascript code to display page numbers:

<!DOCTYPE html>

<html>
<head>
    <script>
        function subst() {
            // JavaScript code
        }
    </script>
</head>

<body onload="subst()">
    <div style="font-family: Helvetica; font-size:0.75rem; text-align: right; width:100%;">
        <span class="page"></span> / <span class="topage"></span>
    </div>
</body>

</html>

*Feel free to customize the style of the footer div according to your design preferences.

If your footer HTML page (named Footer.html) is located in the Shared folder within the Views folder, you can prepare custom switches before calling Rotativa like this:

string customSwitches = "--footer-html " + Server.MapPath("~/Views/Shared/Footer.html");

When generating a PDF based on a View named MyPdfView.cshtml in an MVC action, you can utilize ViewAsPdf and pass your custom switches like so:

return new ViewAsPdf("MyPdfView")
{
    FileName = "MyPdfView.pdf",
    CustomSwitches = customSwitches
};

That's all! Let me know if this solution works for you.

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

jQuery Datatable pagination issue: not displayed

I need some help with my project where I am using JQuery Datatable. The issue is that I cannot seem to display the pagination and other elements of the datatable. Below are the codes for your review: Although I can fetch data from my service successfully, ...

jqueryajaxdatatable

Steps to decode a data URL into an image and render it on a canvas

With 3 canvases at my disposal, I decided to get creative. First, I cropped a region from canvas1 and showcased it on canvas2. Then, I challenged myself to convert the image in canvas2 into a URL and then reverse the process back to an image, all to be d ...

javascripthtmlhtml5-canvas

The data object received from the $.get method may come back as either undefined

The code below demonstrates the process of converting a string variable 'data' back into an object using $( data ). However, when trying to execute commands like $(data).find(".className").text() or $(data).find(".someClass").html(), it results i ...

jqueryajax

Troubleshooting Problem with jQuery's $.ajax Success Response

While working with a jQuery $.ajax call, I stumbled upon an issue within my success callback function: success: function(response) { console.log('response = '+response); console.log('response.validate = '+response.validate); } ...

ajaxjquery

Using TypeScript and Angular to modify CSS properties

I'm trying to figure out how to change the z-index CSS attribute of the <footer> element when the <select> is open in TypeScript (Angular 10). The current z-index value for the footer is set to 9998;, but I want it to be 0;. This adjustmen ...

htmlcssangulartypescriptfunction

Modifying a gridview cell through a Modal popup that is displayed using the rel attribute

I have successfully implemented a modal dialog using CSS and the rel="#showEditModal" attribute of a button. This enabled me to add values to the database and update the gridview effectively. However, I am now facing a challenge where I need to be able to ...

javascriptjqueryasp.netmodal-dialog

In search of a render function that can effectively apply styles to HTML strings using React JS

I have been struggling to convert the result field value, including HTML attributes string, into respective styles for one column in my antd table. Below is the string I am trying to convert: The exhaust air requirements for fume hoods will be based on m ...

javascripthtmlreactjsecmascript-6antd

Alert: CSS 4.0 Warning Validation - The value "rgb(0, 0, 0, 0.4)" is not valid for the "border" property

Wrapping up my asp core 3 project, I've been addressing various warnings that have popped up. However, one particular warning has me stumped. The CSS property in question is functioning perfectly, adding a touch of transparency to the black border. Wh ...

cssasp.net-core

Locate all elements by a segment of the identification attribute

Is it feasible to achieve the following: I possess a collection of divs, all having IDs that conclude with '_font', such as 'body_font', 'heading_font', 'tagline_font', and so on. Is there a method to retrieve thes ...

javascriptjquery

Send JSON data using jQuery and process it in Node.js

Looking for guidance on how to send json form data from JavaScript by clicking the submit button and then receiving that json data on a Node.js server. My attempts so far have only resulted in printing '{} ' on the Node.js server terminal Below ...

javascriptjquerynode.js

Struggling with displaying values from an array using getJSON

I've encountered an issue with displaying the results of a $.getJSON call. The code I have retrieves JSON data from a specific page. var loadItems = function() { if (hasNextPage === false) { return false } pageNum = pageNum + 1; var url = baseUr ...

javascriptjqueryajaxjsondjango

Is it necessary to have authorization on a community website?

I'm currently revamping the website structure for a thriving open-source community. In order to combat potential spamming issues arising from a large number of members, I am considering offering certain options or features exclusively to authenticated ...

djangohtmlgithuboauthvs-web-site-project

How long does jQuery animation last until completion?

Within my project, I am utilizing the animationComplete function from the jQuery mobile library. You can find this function at The animation in my project involves a sequence of objects with various tasks to be executed at each point of the animation. The ...

javascriptjquerycssjquery-mobile

Enhance the current value through the use of .each() in JQuery

I'm currently working on a script that utilizes the .each() function to calculate the width of every image within the .item class. My goal is to gather all these widths and store them in a variable, which I then plan to pass outside of the function. H ...

jqueryfunctionloopseach

Calibrating height using CSS

Within my HTML document, I have the following structure: <div id="content"> <div id="wrapper"> <div id="steps"> <form id="formElem" name="formElem" action="" method="post"> <fieldset class ...

csshtmlheightfieldset

Conceal any child elements that are cut off as a result of the overflow hidden property

Despite the numerous questions on this topic, none provide a suitable answer. In this scenario, the overflow hidden property is applied to the parent div. The goal is to display only the child elements that are fully visible within this container. In the ...

javascriptcssflexbox

Problem with holding a dropdown button

Having trouble maintaining the position of this button within the floating button holder above my website content. How can I incorporate a drop-down menu while ensuring it stays within the same button holder? .btn-holder { backgr ...

css

Does a browser's cache utilize storage for XMLHttpRequest responses?

I have a question regarding browsers in general, with a focus on Chrome. Imagine I have the following code snippet in my file, index.html: <img src='//path/to/foo.img'></img> The file foo.img changes on my server every hour. I woul ...

javascripthtmlcssgoogle-chromecaching

Guide to monitoring file upload progress with AJAX or jQuery

Looking for a way to track file upload progress using ajax or jquery? Check out the code below: <form id="mid-form" id="upload_form" method="POST" enctype="multipart/form-data" action="includes/talent_upload_video.php"> ...

phpjqueryajax

Implementing an event listener on an anchor element dynamically inserted through Javascript

I made an Ajax call that retrieves a list of movie titles. I am trying to click on a button next to each title in order to add it to my "currently watching" list. However, my "add" link is not responding to the event handler. What steps can I take to suc ...

javascriptjqueryajax