Print header footer page

header footer

When we want to print the current page or save the current page as PDF, we hope to add our own custom logo or text. After investigation, we can find the following two most commonly used ways to add header and footer, but they are not the most ideal solution, and we are still trying to research

table implementation

With labels and (when a long form is printed, the sum of the form can be printed on each page containing the form data. )This feature comes from defining page and footer

<style>
	.preview-table {
        table-layout: fixed;
        width: 100%;
        border: none;
        margin: 0px;
        padding: 0px;
    }

    .page-footer {
        position: fixed;
        bottom: 0;
        width: 100%;
        border-top: 1px solid black;
        text-align: center;
    }

    .page-header {
        position: fixed;
        top: 0mm;
        width: 100%;
        border-bottom: 1px solid black;
        text-align: center;
    }

    .header-content,
    .footer-content {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .page-header,
    .page-header-space {
        height: 70px;
        display: none;
    }

    .page-footer,
    .page-footer-space {
        height: 50px;
        display: none;
    }
	.gs-item {
    	float: left;
        page-break-inside: avoid;
	}
@media print {
    @page {
        size: auto;
        margin: 0mm;
    }
    .page-header,
    .page-header-space,
    .page-footer,
    .page-footer-space {
            display: block !important;
     }
}
</style>
<table class="preview-table" border="0" cellpadding="0" cellspacing="0">
	<thead style="display: table-header-group;">
		<tr><td><div class="page-header-space"></div></td></tr>
	</thead>
    <tbody>
    	<tr><td><div class="gs-item"> . . . . </div></td></tr>
    </tbody>
    <tfoot style="display: table-footer-group;">
    	<tr><td><div class="page-footer-space"></div></td></tr>
    </tfoot>
</table>

The effect is as follows:

Every printed page has a header and footer
summary

  • Table layout: fixed; is to prevent the div in td from supporting td, so that the td width is not based on the relationship between auto and the div width
  • Position: fixed set the position of header and footer
  • @page {margin: 0} opens the browser Print Preview page. By default, Options shows that there are no Headers and Footers

@page implementation mode

Many styles can be customized by using print media query. When you want to change page size, margins, etc., you need to use @ page. Only some CSS properties are supported in page context. The supported properties include: margin, size, marks, blend and page margin box. The unsupported properties will be ignored.
Page margin box (CSS3)
Note: this property is not supported by common browsers. It is recommended to use Prince
The outer margin of the page is divided into 16 outer margin boxes. Each outer margin box has its own outer margin, border, inner margin, and content area. The margin box is used to create headers and footers that are part of the page and are used to supplement information, such as page numbers or titles.

The outer margin box of the page needs to be used under @ page, which is similar to the pseudo class and also contains the content attribute.

@page {
    @bottom-left, @bottom-center, @bottom-right {
        border-top: 1px solid gray;
    }
    @bottom-center {
        content: "The first" counter(page) "page";
    }
}

attribute
(1) The margin series properties (margin top, margin right, margin bottom, margin left, and margin) are used to specify the page margin size. The units of values for the margin family property do not support em and ex.

@page {
   size: A4 portrait;
    margin: 3.7cm 2.6cm 3.5cm; /* National standard document margins GB/T 9704-2012 */
}

(2) The size attribute supports auto, landscape, portait, {1,2} and.

  • The default value is auto, indicating that the page size and direction are determined by the user agent
  • Landscape specifies that the page is landscape, if not specified, the size is determined by the user agent
  • portrait specifies that the page is vertical. If not specified, the size is determined by the user agent
  • {1,2} means to specify the page size, fill in two values to specify the width and height of the page box respectively, fill in one value to specify the width and height at the same time. In CSS3, the units of values support em and ex, and the size is relative to the font size in the page context
  • Also used to specify page size, equivalent to using {1,2}. Common values are: A3, A4, A5, B4, B5, etc. for detailed dimensions, please refer to ISO 216. The page direction can be specified simultaneously with the combination of landscape or portrait.

(3) pseudo class
Page context also supports pseudo classes, including:: left,: right,: first, and: blank.
Pseudo classes: left and: right
When two-sided printing is required, it is usually necessary to set different styles (such as margins, page number positions) for the left and right pages. At this time, the left page and the right page can be represented by: left and: right respectively. Again, setting the left and right page styles with: left and: right does not mean that the user agent will print both sides of the page

@page :left {
    margin-left: 2.5cm;
    margin-right: 2.7cm;
}

@page :right {
    margin-left: 2.7cm;
    margin-right: 2.5cm;
}

Pseudo class: first
Pseudo class: first is used to match to the first page of the document.

@page :first {
    margin-top: 10cm; /* The margin on the first page is set to 10cm */
}

Pseudo class: blank
Pseudo class: blank is used to match a blank page of a document.

h1 {
    page-break-before: left; /* First level Title forced to right page */
}

@page :blank {
    @top-center {
        content: "This is a blank page";
    }
}

Note that a blank page can be either a left page or a right page. Set the style of the left page or the right page to display on the blank page. If you do not want to display on the blank page, you can clear these styles.

h1 {
    break-before: left;
}

@page :left {
    @left-center {
        content: "This is the left page.";
    }
}

@page :right {
    @right-center {
        content: "This is the right page.";
    }
}

@page :blank {
    @left-center, @right-center {
        content: none; /* Do not display if it is a blank page */
    }
}

Note: I've said so many page s, but I don't have browser support yet. What a pity!

Remove browser default headers and footers

@page {
	size: auto;
	margin: 0mm;
}

In this way, even if users check Headers and Footers in Options, the browser's default header and footer will not be displayed

Page number

body {
	counter-reset: page;
}
#print-foot:after {
	content: counter(page);
	counter-increment: page;
}

It's also a pity that this style of writing is not supported by Google browser.

Published 25 original articles, won praise 2, visited 5108
Private letter follow

Tags: Attribute css3 Google

Posted on Mon, 20 Jan 2020 04:10:56 -0500 by Daniel Exe