How to use HTML to print header and footer on every printed page of a document?

前端未结

关注

 20  1378

迷失自我

Is it possible to print HTML pages with custom headers and footers on each printed page?

I\'d like to add the word \"UNCLASSIFIED\" in Red, Arial, size 16pt to the t

相关标签:

20条回答

猫巷女王i

2020-11-21 17:23

If you can use javascipt, have the client handle laying out the content using javascript to place elements based on available space.

You could use the jquery columnizer plugin to dynamically lay out your content in fixed size blocks and position your headers and footers as part of the rendering routine. http://welcome.totheinter.net/columnizer-jquery-plugin/

See example 10 http://welcome.totheinter.net/autocolumn/sample10.html

The browser will still add its own headers or footers if enabled in the os. Consistent layout across platforms and browsers will likely require conditional css.

0 讨论(0)
发布评论:

提交评论
- 加载中...

深忆病人

2020-11-21 17:23

If you are using a template engine like Asp.net Razor Engine or Angular, I think you must re-generate your page and split the page in several pages and then you can freely markup each page and put header and footer on theme. one example could be as bellow:

@page {
  size: A4;  
   margin: .9cm;
}


@media print {

   body.print-paper-a4 {
    width: 210mm;
    height: 297mm;
  }

   body {
       background: white;
       margin: 0;
       padding: 0;
   }

   .print-stage,
   .no-print {
       display: none;
   }


   body.print-paper.a4 .print-paper {
      width: 210mm;
        height: 297mm;
    }

   .print-paper {
       page-break-after: always;
       margin: 0;
       padding: .8cm;
       border:none;
       overflow: hidden;
   }

}





.print-papers {
    display: block;
    z-index: 2000;
    margin: auto;

}


body.print-paper-a4 .print-paper {
    width: 21cm;
    height:27cm;
}


.print-paper {
    margin: auto;
    background: white;
    border: 1px dotted black;
    box-sizing: border-box;
    margin: 1cm auto;
    padding: .8cm;
       overflow: hidden;   
}


body.print-mode .no-print-preview {
    display: none;
}

body.print-mode .print-preview {
    display: block;
}

<body class="print-mode print-paper-a4">
        
        <div class="print-papers print-preview">
            <div class="print-paper">
                <div style="font-size: 5cm">
                    HELLO
                </div>

            </div>
            <div class="print-paper">
              <div class="page-header">
                </div>
              
              
            </div>
            <div class="print-paper">
                
                

            </div>            
        </div>
  </body>

0 讨论(0)

上一页 1 2 3 4