How to change the position of window.print() pages number?

Question

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

Thanks.

Answer 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 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.