Search code examples
javascriptcssbrowserprintingprinting-web-page

add header when page breaks when using page-break-inside: avoid wth css or javascript or from browser?

i have a page that has sections as divs with inner divs and content. The numberof divs varies alot from less than a page to many pages when printing.

I am using page-break-inside: avoid on every section div so that all sections are never printed / split accross 2 pages. (This i only get to work in firefox but that whole other story....!).

Problem is i want to add a header image to the top of each page when printed but using the page-break-inside: avoid css property i dont know where to add the headersasthis is worked ou when printing.

Any one know ow i can acheive this ? can i somehow find out where the page breaks are going to be and add header there ? or is there a way of setting header image in the brower like you can to word documents etc ?

please help thanks alot rick

Solution

  • It's impossible to control the printed page from JS/HTML/CSS because you don't have any access to the print driver so you can not know what paper size or margins the user has set.

    To get around this you could use a component to create a PDF from your HTML so you will have more control of the layout. That would have to be done server-side.