Count the start and end rows of a table within the <tfoot> using pdfHTML/iText 7

Currently, I am working on a project where I am developing a document generator that utilizes pdfHTML 3.0.3 and iText 7.1.14. The document includes a table displaying 'items'. It's worth noting that these item rows will likely span across multiple pages rather than neatly fitting onto one page.

The first column of this table displays item numbers, and it is possible that some item numbers might be missing due to void items.

I am trying to figure out a way for the table to display the first and last item number in the <tfoot> section of the <table>. Ideally, these first and last item numbers should be dynamically determined based on what is currently showcased on the laid-out page.

For reference, here's an example: https://i.sstatic.net/XAe2Z.png (the FROM section should display the number 1, and the TO section should show the number 5).

Unfortunately, it seems that achieving this with only HTML and CSS isn't possible since they lack support for counters that utilize the page as context (CSS counters typically use a global context rather than a page-specific one).

I believe it may be feasible to create a custom renderer based on TableRenderer, although I'm unsure about where to begin. While the iText documentation does have examples of how to develop your own renderer, I haven't come across any specific examples related to this particular issue.

c#htmlcssitextpdfhtml

Answer №1

Converting code from Java to C# is as simple as changing some method names to start with uppercase letters. The answer will be based on the visual representation of a table in HTML:

https://i.sstatic.net/577t6.png

Here is the HTML code:

<!DOCTYPE html>
<html>

<head>
  <style>
    table {
      border-collapse: collapse;
    }
    td {
      border: solid 1px black;
      page-break-inside: avoid;
    }
  </style>
</head>

<body>

<table>
  <colgroup>
    <col width="30%">
    <col width="70%">
  </colgroup>
  <tbody>
    <tr>
        <td>1</td>
        <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit...
    </tr>
    <tr>
        <td>2</td>
        <td>Iaculis at erat pellentesque adipiscing commodo...
    </tr>
    ...
  </tbody>
  <tfoot>
    <tr><td colspan="2">from <span id="from">dummy</span> to <span id="to">dummy</span></td></tr>
  </tfoot>
</table>

</body>
</html>

To customize HTML to PDF conversion behavior, you can set a custom tag worker factory and renderers for specific elements like placeholders within the <span> tags.

ConverterProperties converterProperties = new ConverterProperties();
converterProperties.setTagWorkerFactory(new CustomTagWorkerFactory());
HtmlConverter.convertToPdf(new File(sourceHtml), new File(targetPDF), converterProperties);

The custom tag worker factory handles processing for span placeholders and the table element. The custom renderer for text within span placeholders registers itself with the table footer renderer before layout.

Finally, the table footer renderer analyzes the content to determine row ranges and injects them into the placeholder elements just before drawing the table footer in the PDF.

This approach should work well with iText 7.1.15 or later versions for generic layout customizations in HTML to PDF conversion scenarios.

Check out the resulting PDF below:

https://i.sstatic.net/K7Xyt.png

https://i.sstatic.net/E7lQi.png

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

"Why does the font on my website look different on my computer before I upload it to my web host? How can I fix

I am currently developing a website and have chosen the font "PT Sans Narrow" for it. Unfortunately, it seems that Chrome and many other browsers do not support this font by default. Is there a way to include the PT Sans Narrow font with the website when ...

htmlcssfonts

image in responsive css design

Image 1 (Current Layout) Image 2 (Desired Layout) I am trying to achieve a responsive layout similar to the second image. However, I seem to be stuck with the layout from the first image. Here is the CSS code I'm currently using: @media (max-width ...

htmlcssresponsive

Is there a way for me to extract the HTTP response status code from a given URL?

I am working on automating a test for a webpage that includes a URL that needs to be tested. To retrieve the HTTP status code, I developed a method as follows: public string ContentUrlHttpRequest() { HttpWebRequest protocolWebRequest = ...

c#seleniumhttprequesthttpresponsehttp-response-codes

Having trouble with Javascript in getting one-page scroll navigation to work?

Hey there, I am working on creating a one-page scroll navigation with some basic javascript to add a smooth animation effect that takes 1 second as it scrolls to the desired section. However, I seem to be experiencing an issue where it's not functioni ...

javascriptjqueryhtmlcss

Ways to extract text from a PDF within a browser using Selenium with C#

I am in the process of automating the following scenario: Click on a button, A pdf file is opened in a new window Read the content of the pdf file which has been opened in the new window. I need some assistance with what to do next after switching to the ...

c#pdfselenium-webdriver

Utilize Firebase Hosting to Host Your Vue Application

Having some trouble with hosting code on Firebase. Instead of displaying the value, {{Item.name}} is appearing :( Same code works fine on Codepen. Wondering if Firebase accepts vue.min.js? When deployed, the site is showing {{var}} instead of the table va ...

javascripthtmlfirebasevue.jsgoogle-sheets

The small screen @media query is malfunctioning and not displaying correctly

After creating an HTML file and CSS file, I have encountered a styling issue. When viewing the output on a larger screen, the text "I LOVE CODING, I WILL BECOME AN EXPERT." should be displayed in blue on a red background. However, on smaller screens, it ne ...

htmlcss

Stop aspx button postback on click using cSharp

The following HTML code snippet includes an <asp:Button> element. <asp:Button ID="CalculateG481" runat="server" Text="Calculate" OnClick="CalculateG481_Click" /> When clicked, the button calls the function CalculateG481_Click but then initia ...

javascriptc#jqueryasp.net

Is it possible to modify the color of a span element within a select dropdown?

Is there a way to change the color of a span to red within a select option in js fiddle? I am trying to modify the color of <span class="myError">This is a required field.</span> to red https://i.sstatic.net/nRF2c.png select{ color: green; ...

javascriptjqueryhtmlcss

Retrieving information from emails, yet providing disorganized text fragments

I have developed a method to remove html, style/script tags, and new line tags from the source code of email pages: def extract_message(url): markup = open(url) soup = BeautifulSoup(markup, "html.parser") for script in soup(["script", "style"] ...

pythonhtmlemailbeautifulsoup

Bring JavaScript Function into Vue's index.html File

Recently in my code files, I noticed the following: function example() { console.log("testing"); } In another file, I have something like this: <head> <script src="../src/example.js" type="text/babel"></sc ...

javascripthtmlvue.js

DateTimePicker with the functionality to select specific days on a weekly basis

Is it possible to restrict the selection of days in a DateTimePicker to only Monday through Friday, disabling Saturday and Sunday options? I am looking for a solution that automatically prevents users from choosing weekends without needing pop-up message ...

c#.netwinforms

What is the best way to implement the concept of setting a minimum size for a scrollable element based on its content and a

In the interest of simplicity, let's assume that my fixed height is 100px. So, the CSS expression for the question in the title would be: height: min(min-content, 100px); This means to take the minimum value between content height and 100px. Unfortun ...

htmlcsssizing

To generate a new <div> element by clicking a button and then clicking on it using C# Selenium

Before clicking the button, this is the initial HTML code for the page: <div id="layerContainer"> </div> After clicking the button, the code changes as shown in the picture here I have been attempting to locate the new button, but I keep rec ...

c#htmlseleniumphantomjs

One way to automatically create unique reference numbers is to generate a random number between 1 and 99 and append it to a date format, such as YYMMDD. For example,

I have a code that generates numbers like 030317-001 to 030317-010 in a list. How can I modify it so that the same sequence is generated with just one button click, without any repeats, up to a maximum of say 030317-099? <?php $x = date("dmy");// ...

phphtml

Difficulty integrating custom CSS with Bootstrap framework

I attempted to incorporate a custom CSS file with my Bootstrap code, but unfortunately it does not seem to be functioning properly. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta htt ...

htmlcssbootstrap-5

Scrolling and hovering now triggers the fixed button to toggle class seamlessly

Currently, I am attempting to modify the class of a button on my website. The initial state of the button is wide, but as the user scrolls, it should shrink in size. When hovering over the shrunken button, it should expand back to its original width. Alt ...

javascripthtmljquerycssbutton

Most efficient method to upload numerous images without any lag

I have a website where images are loaded only when they are slightly below the viewport. This method allows the site to load initially without images and then determine which ones need to be loaded based on the user's viewpoint. When a user scrolls ...

javascripthtmlimage

"Enhance user experience with jQuery's text expansion and collapse

Figuring out how to collapse and expand text with a button click has been challenging for me. I managed to make the text collapse when the button is clicked, but now I also need it to expand back again. The goal is to have the text initially hidden, then e ...

javascriptjqueryhtml

HTML Backup Page

Is there a way I can create a fallback page? For example, my method for updating pages on my website involves deleting the original index.php and replacing it with a separate index.html that displays a "We'll be back soon!" message. This is to notify ...

html