Html to pdf page numbers

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Page Numbers #21

Page Numbers #21

Comments

I need to add the page number in a format like:

Page 1 / 3
Page 2 / 3
Page 3 / 3

is there a way to do this?

The text was updated successfully, but these errors were encountered:

Because it cost me some time:
If someone is looking for the number of pages, you can do that (using this branch):

function myCallback(pdf) < //Optional: Save PDF //IMPORTANT EDIT: First save the file, then get the page numbers, otherwise you will get a blank page! pdf.save('my.pdf'); //get the number of pages var totalPages = pdf.putTotalPages().internal.getNumberOfPages() console.log("Total Pages: " + totalPages); >html2pdf(element, < pdfCallback: myCallback, // Any other options you want to set. >); 

Hey @murcoder, thanks for the contribution! Do you have a source on how pdf.putTotalPages().internal.getNumberOfPages() works? The jsPDF documentation is a bit outdated.

Edit: On further research, it looks like the command can be simplified to pdf.internal.getNumberOfPages() , which also avoids some unwanted side-effects of pdf.putTotalPages() .

Hi @eKoopmans! Because I couldn’t find a good documentation, it was pretty hard to find how to get the page numbers. But in the end I found this helpful thread and I checked out the source code.

Hi, I have just pushed a new branch, new-api, which is ready for testing! The readme has all the information on the new API. Please let me know if there are any problems with it — I want to make sure it’s stable before merging into master!

For this specific request, you could make changes to the PDF object before saving like so:

html2pdf().from(element).toPdf().get('pdf').then(function (pdf)  // Your code to alter the pdf object. >).save();

Tried adding page numbers but displays nothing

html2pdf().from(element).set(opt).toPdf().get('pdf').then(function (pdf) < var totalPages = pdf.internal.getNumberOfPages(); for (i = 1; i >).save(); 

First the pdf.text arguments are not in the right order
Then you should call getHeight() and getWidth() on pdf.internal Object

html2pdf().from(element).set(opt).toPdf().get('pdf').then(function (pdf)  var totalPages = pdf.internal.getNumberOfPages(); for (i = 1; i  totalPages; i++)  pdf.setPage(i); pdf.setFontSize(10); pdf.setTextColor(150); pdf.text('Page ' + i + ' of ' + totalPages, pdf.internal.pageSize.getWidth() - 100, pdf.internal.pageSize.getHeight() - 30); > >).save();

Thanks @kl3sk! That looks like an effective way of adding page numbers.

Closing as resolved by this post. Thanks again!

@eKoopmans @kl3sk Thank you for this!
However, it doesn’t appear on the document (although when I search for it’s there but not in the page itself) I tried to play around with the x and y of the text but doesn’t to work either. Is there something that I can do to fix it?

Update: Never mind, I found that when i write it like this it works
pdf.text(» + i, (pdf.internal.pageSize.getWidth()/2), (pdf.internal.pageSize.getHeight() — 0.3));

Good point, the coordinates sent to pdf.text() will be in your document’s units — so if you’re using inches for instance (vs the default mm), the values will differ.

Its possible to add HTML to Header and Footer?

For header you can simply try

pdfObject.text("my header text", 10, 10)

This will set the header at position x=10, y=10 at every page. Also for footer you can do in same way.

@kl3sk Thanks for the solution. Your solution worked after defining the variable i in for loop as follow.

html2pdf() .from(pdfHTML) .set(< margin: [30, 0, 30, 0], filename: 'file.pdf', image: < type: 'jpeg',quality: 0.98 >, html2canvas: < dpi: 96, scale: 1, scrollX: 0, scrollY: 0, backgroundColor: '#FFF' >, jsPDF: < unit: 'pt', format: 'a4', orientation: 'p' >, pagebreak: < before: '.page-break', avoid: 'img' >>) .toPdf() .get('pdf').then(function (pdf) < var totalPages = pdf.internal.getNumberOfPages(); for (let i = 1; i >).save(); 

Источник

Advanced HTML to PDF API features

Say you have an HTML table with 100 rows. When you render a long table like this in a browser, the table content can expand forever. In the browser world, you don’t need to worry about pages at all—which page your table rows land on, how many can fit on a page, etc.

Render this same table in a PDF, however, and you’ll need to deal with page breaks. If a table is longer than a single page, or starts half way down a page, rows will need to be broken up and rendered across multiple pages.

Turns out a page full of table rows without header context isn’t very user friendly. For example, if you printed out the following, its second page would be a little confusing without the headers. What is that 3rd column again?

Ideally we’d render the table headers on each page that shows the table’s rows, then someone doesn’t need to look at a previous page to understand the headers.

Table header repeating like this is supported and is turned on by default! All you have to do is make sure you put your header th in a thead element:

    Qty Description Price Subtotal     2 Blue large widgets $15.00 $30.00   

Then the headers render again on pages that get the overflow rows:

Repeating also works with table footers when a tfoot element is used:

  .   2 Blue large widgets $15.00 $30.00    Table Footer    

Here’s the header and footer repeating:

All the table context, all the time!

Turning header repeating off

While table header repeating is on by default, you can turn it off with a custom CSS rule -fs-table-paginate :

table.no-header-repeat  -fs-table-paginate: none; > 

Or you can disable it by simply not using thead , tbody , and tfoot elements.

Forcing page breaks

Sometimes you need a piece of content to always start on its own page, no matter the content that came before it. You can force page breaks with the page-break-before: always rule on any element. It will create a new page, then set the element with the page-break-before CSS rule as the first element of that page.

Here’s a simple example with three pages:

  Lonely Page 1 content  class="new-page">Page 2 content  class="new-page">Page 3 content 

.new-page  page-break-before: always; > 

Rendering page numbers

Page numbers are a fixture in most PDFs. Often PDFs will have a Page 2 of 3 style numbering scheme on each page.

You achieve this by injecting page numbers into any element by using a bit of special CSS. You target the content of your chosen element’s ::after pseudo-element with a special directive:

 class="page-container"> Page  class="page"> of  class="pages">  

.page-container .page::after  content: counter(page); > .page-container .pages::after  content: counter(pages); > 

The targeted elements can be on any page you’d like. But it’s likely most important to render the page number information on each page, in one of the margins, which brings us to our next section.

Rendering HTML elements in the page margins

Many PDFs have content in the margins on every page. For example, page numbers, your company name, phone number, etc. The HTML renderer allows rendering anything your heart desires in the margins by way of a «running» element.

You render an element in the body like any other element, define the element as a «running» element, then tell each page to use that element in one of the defined margin areas.

Here’s an example that uses the page number example above and renders it in the bottom right margin on every page.

   class="page-container"> Page  class="page">   . content.  

.page-container  /* Define this element as a running element called "pageContainer" */ position: running(pageContainer); > @page  /* Use any of these locations to place your margin elements: @top-left, @top-left-corner @top-center @top-right, @top-right-corner @bottom-left, @bottom-left-corner @bottom-center @bottom-right, @bottom-right-corner */ @bottom-right  /* Reference "pageContainer" to be the content for the bottom right page margin area */ content: element(pageContainer); > > 

The output using the page breaks and applying a little styling to the page numbers:

Element location

A «running» element’s location in the HTML determines which pages it shows on. If you want it in a margin element on all pages, just make sure to place the «running» element before all non-running HTML elements in the HTML code. For example, place all your margin elements that show on all pages right after the element.

To see this behavior in action, using the page number and page break examples above, we can start the page numbering on the 2nd page by placing the running pageContainer element on the second page.

 Lonely Page 1 content  class="new-page">Page 2 content  class="page-container"> Page  class="page">   class="new-page">Page 3 content 

.page-container  /* Define the this element as a running element called "pageContainer" */ position: running(pageContainer); > .new-page  page-break-before: always; > @page  @bottom-right  /* Reference "pageContainer" to be the content for the bottom right page margin area */ content: element(pageContainer); > > 

Here’s the output. Notice there is no Page 1 on the first page:

Positioning margin elements

Margin elements may not render exactly where you want them to. It’s possible to place them exactly where you want with margin-top .

 class="margin-content"> Margin Content 

.margin-content  position: running(marginContent); /* Position the element with margins */ margin-top: 10px; /* Style margin element like any other */ font-size: 12px; color: #c00; > @page  @top-left  content: element(marginContent); > > 

You made it!

Hopefully these features go a long way to giving you full control in creating PDFs that look exactly as you want.

There are even more advanced features in there that we’ll be talking about in coming months. If you experiment and are struggling to accomplish what you’d like with the HTML to PDF API, don’t hesitate to contact us:
support@useanvil.com

Источник

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

wkhtmltopdf / wkhtmltopdf Public archive

page numbering in header/footer htmls with wkhtmltopdf issue #3911

page numbering in header/footer htmls with wkhtmltopdf issue #3911

Comments

I have code like wkhtmltopdf help

> html>head>script> function subst()  var vars = >; var query_strings_from_url = document.location.search.substring(1).split('&'); for (var query_string in query_strings_from_url)  if (query_strings_from_url.hasOwnProperty(query_string))  var temp_var = query_strings_from_url[query_string].split('=', 2); vars[temp_var[0]] = decodeURI(temp_var[1]); > > var css_selector_classes = ['page', 'frompage', 'topage', 'webpage', 'section', 'subsection', 'date', 'isodate', 'time', 'title', 'doctitle', 'sitepage', 'sitepages']; for (var css_class in css_selector_classes)  if (css_selector_classes.hasOwnProperty(css_class))  var element = document.getElementsByClassName(css_selector_classes[css_class]); for (var j = 0; j  element.length; ++j)  element[j].textContent = vars[css_selector_classes[css_class]]; > > > > script> head> body style pl-s">border:0; margin: 0;" onload pl-s">subst()"> table style pl-s">border-bottom: 1px solid black; width: 100%"> tr> td class pl-s">section">td> td style pl-s">text-align:right"> Page span class pl-s">page">span> of span class pl-s">topage">span> td> tr> table> body> - html>

Page undefined of undefined

i don’t know please help me. Thanks!

The text was updated successfully, but these errors were encountered:

Источник