I am having trouble including page numbers using @page CSS

Technical Support Apryse SDK
, , ,
1

Product: HTML2PDF

Product Version: The newest

Please give a brief summary of your issue:

I’m trying to produce a PDF document with page numbers added via CSS using:

@page {
    margin: 1in;
}
@page {
    @bottom-left {
        content: 'Page ' counter(page)
    }
}

When I print the HTML from Chrome, I can see the page numbers.
But when I convert from HTML to PDF using HTML2PDF, I cannot.

Am I missing some configuration somewhere on the SDK?

This is Ruby code using the SDK (where the URL points to a HTML file matching the below HTML):

doc = PDFDoc.new
converter = HTML2PDF.new
converter.InsertFromURL(source_file_path)
converter.Convert(doc)
doc.Save(destination_file_path, SAVE_TYPE_LINEARIZED)
doc.Close

The minimal HTML sample I’m using:

<!DOCTYPE html>
<html>
<head><title></title>
    <style>
        @page {
            margin: 1in;
        }
        @page {
            @bottom-left {
                content: 'Page ' counter(page)
            }
        }
    </style>
</head>
<body>
</body>
</html>

Please describe your issue and provide steps to reproduce it:

  • Run the above Ruby code with the HTML provided
  • View the PDF
  • It’s completely blank, rather than showing Page 1 in the footer (as it does when I print it in Chrome)
1 Like
2

Hi Cyrus,

Thank you for the information. We’ve reproduced the issue involving the page numbers and are investigating why the numbers are not showing up. I will let you know as soon as I have more information.

2 Likes
3

Thanks @kmirsalehi. Do you have a timeline for this?

1 Like
4

Hi Cyrus,

I heard back from the devs and they have confirmed that Chromium’s headless shell (which is the base of our HTML2PDF) does not include the page numbers

If you want to add page numbers, we have an official sample that illustrates how to do that (by including headers/footers).

C#:



HTML2PDF converter = new HTML2PDF();
string header = "<div style='width:15%;margin-left:0.5cm;text-align:left;font-size:10px;color:#0000FF'><span class='date'></span></div><div style='width:70%;direction:rtl;white-space:nowrap;overflow:hidden;text-overflow:clip;text-align:center;font-size:10px;color:#0000FF'><span>PDFTRON HEADER EXAMPLE</span></div><div style='width:15%;margin-right:0.5cm;text-align:right;font-size:10px;color:#0000FF'><span class='pageNumber'></span> of <span class='totalPages'></span></div>";
string footer = "<div style='width:15%;margin-left:0.5cm;text-align:left;font-size:7px;color:#FF00FF'><span class='date'></span></div><div style='width:70%;direction:rtl;white-space:nowrap;overflow:hidden;text-overflow:clip;text-align:center;font-size:7px;color:#FF00FF'><span>PDFTRON FOOTER EXAMPLE</span></div><div style='width:15%;margin-right:0.5cm;text-align:right;font-size:7px;color:#FF00FF'><span class='pageNumber'></span> of <span class='totalPages'></span></div>";
converter.SetHeader(header);
converter.SetFooter(footer);
converter.SetMargins("1cm", "2cm", ".5cm", "1.5cm");

HTML2PDF.WebPageSettings settings = new HTML2PDF.WebPageSettings();
converter.InsertFromURL(host + page0, settings);
converter.Convert(doc);
1 Like