1

I have to print an html document (one or more pages) with header and footer and then some images without any header/footer.

Source is like:

<div class="fixed-header">HEADER</div>
<div class="fixed-footer">FOOTER</div>

<table>
<thead><tr><td><div class="page-header-space"></div></td></tr></thead>
<tbody><tr><td>

   HTML BODY (could be long)

   <br style="page-break-after: always">

   IMAGES (to print without header and footer)

<td></tr></tbody>
<tfoot><tr><td><div class="page-footer-space"></div></td></tr></tfoot>
</table>

I need to call print() only one time, I can't ask to the user to print every document separately.

I can alter the code as I like, I can move HTML outside table and also alter HTML from PHP. It is difficult to know the number of pages before print because i don't know the paper size.

Any ideas?

ZA_ITA
  • 51
  • 4
  • Are "pages" in the same document? – YamneZ Jan 03 '20 at 08:41
  • you can add a class and add media query to exclude them from printing. `https://www.tutorialspoint.com/css/css_printing.htm` refer this, it might help you – Akhil Aravind Jan 03 '20 at 08:52
  • @YamneZ Yes, i generate a single HTML document and the i call js window.print(); to send it to the printer. – ZA_ITA Jan 03 '20 at 08:53
  • use @media print i css to hide the header and fotter whenever needed see https://stackoverflow.com/questions/32699436/media-print-css – Avinash jain Jan 03 '20 at 08:53
  • @akhilAravind I am already using media print but I need to disable header and footer **only** in the pages where "IMAGES" are printed. – ZA_ITA Jan 03 '20 at 08:57
  • images are dynamically added, right ? in this case you can add an extra class to the header and footer – Akhil Aravind Jan 03 '20 at 08:58
  • @AkhilAravind but header and footer are defined only in the first page as fixed elements, so when printed they are duplicated on every page. So I can't place extra class on header/footer only in the Nth page (where images are). Now i think that the only way to do is to create a PDF server side and then send to the client for print. :-( – ZA_ITA Jan 04 '20 at 09:33

1 Answers1

0

Footer appearing on every printed page:

.footer {
    position: fixed;
    bottom: 0;
    z-index: 1;
}

Elements where you dont want to see that footer:

.element {
   position: relative // or absolute, but you must specify position
   z-index: 1000;
}
Shimi Shimson
  • 990
  • 9
  • 10