Repeat header in print

Asked

Viewed 2,482 times

3

I can’t release the report I’m using, so I took a generic model on google to help me explain the doubt.

Assuming my report is as follows::

inserir a descrição da imagem aqui

It is mounted via HTML on a system that works with both C# and VB.Net. My intention is on each print page, keep the following header:

inserir a descrição da imagem aqui

This header is an image in the HTML body, by the way, the whole report is done simply with HTML and CSS the database that receives from the database, IE, Crystal Reports is not being used.

How can I proceed to keep this header on each print page?

  • 1

    How do you convert from HTML to PDF?

  • Actually, I’m not. I created a button with onclick="window.print()" and configured the style via CSS. Currently it brings the impression perfectly, just does not repeat the header as it is not inside a <thead>.

  • I don’t think you can do it without using a tool. HTML has no header and footer by definition.

  • @Ciganomorrisonmendez What simple solution would you indicate me? I have to implement in a day, so there was this 'half mouth' development'

  • 1

    @Rafaelbarbosa, put it inside a table <table> and uses the title within the <thead> This as far as I know will only work in Firefox (I know that in Chrome and Opera does not work), is a quick solution, but "half mouth". Hehe

  • @Fernando hahaha is a solution. The problem is that in my report, I have two elements <table>. If I had only one, I could do it without error

  • 1

    You can try Vreport. With it you can configure what you want, delimiting by div’s. The following is a tutorial http://www.maujor.com/blog/2009/09/extensao-vreport/

Show 2 more comments

2 answers

4


3

Nothing much more than my comment, and with little support from browsers (today works in Firefox and IE (I don’t know if at all)), you could put your content inside a table and add the title (or header) you want to repeat inside the element <thead>, this would cause at the time of printing (in the cited browsers) the headers of repeating to each page. Something similar to this:

<table>    
  <thead>
     <!-- Will print at the top of every page -->
  </thead>    
  <tbody>
     <!-- Page content -->
  </tbody>   
</table>

But as you mentioned there are already other tables on your page, so you could just apply the table style to your elements, something like this:

CSS:

@media print {
    #header {
        display: table-header-group;
    }

    #content {
        display: table-row-group;
    }
}

HTML:

<div id="header">
    Cabeçalhos
</div>
<div id="content">
    ... conteúdo das paginas
</div>

Source: Print header/footer on all pages (Print Mode) - Soen

  • Fernando, unfortunately it didn’t work

  • @Rafaelbarbosa, is it possible to exchange the sensitive data and demonstrate how your report turned out that did not work? (You tested in Firefox right?)

  • Actually I tested on IE. He just ignored the <div> continue as it is before the change. I checked the placement of these in the generated html and was correct, I put "! Important" in the CSS...

Browser other questions tagged

You are not signed in. Login or sign up in order to post.