1

Does anyone know how to move the sheets of paper-number position from the right-bottom to the top-bottom?

Thanks.

page number exmaple

Sandy Fu
  • 71
  • 1
  • 3

1 Answers1

1

You can't change the position of the page number when using the window.print() method. The page number is automatically added by the browser when the user prints the page, and its position and formatting are determined by the user's print settings and the browser's default styles for the @page CSS rule.

If you want to have more control over the page number and its position, you can use a CSS-based approach to print your page.

@media print {
  @page {
    margin: 0;
    size: auto;
    width: 210mm;
    height: 297mm;
  }

  .page-number {
    position: fixed;
    top: 10mm;
    right: 10mm;
    font-size: 12pt;
    color: #888;
  }
}

image without styles

image without styles

image with styles

image with styles

Note: The CSS-based approach will only work in modern browsers that support the @media and @page rules. In older browsers, the page number will still be added by the browser using its default styles and positioning.

egerka
  • 33
  • 4
  • 1
    Thanks for the answer. But what if the DOM content is longer than an A4 paper which is automatically slice into 2 sheets of paper, I found that I will get 2 pages from the print method, but 1 page from the customized page. Can I get the pages number parameter which generated by the print method from window? – Sandy Fu Dec 14 '22 at 02:07