Welcome Guest Search | Active Topics | Sign In | Register

CSS styles from external file in page header and footer Options
Maxim
Posted: Wednesday, December 18, 2013 2:46:03 AM
Rank: Advanced Member
Groups: Member

Joined: 12/18/2013
Posts: 67
Hello!

Is it possible to use styles from an external CSS file in page header and footer?

This is the code I use:

Code: C#
PdfDocument doc = new PdfDocument();
HtmlToPdf.Options.PageSize = PdfPageSizes.A4;
HtmlToPdf.Options.OutputArea = new RectangleF(0, 0, 8.27f, 10f);
HtmlToPdf.Options.FooterHtmlFormat = pageFooterHtml;
HtmlToPdf.Options.FooterHtmlPosition = 10f;
HtmlToPdf.ConvertUrl(absolutePageUrl, doc);


The page has a link to a file with CSS style. pageFooterHtml contains HTML with <div> which has class attribute set to "footer". And in my external CSS file I has such class with styles (paddings, font color, etc).

If I open the page in browser the styles are applied. If a PDF file is built, the footer doesn't have these styles.

Seems like I get the same behaviour in page header (styles from external file are not applied).

Am I doing anything wrong? Or is it a limitation? If it is and we have to use inline styles in page header and footer, then is it possible to use custom/embedded fonts somehow there? I have them in an external file with @font-face rule.
eo_support
Posted: Wednesday, December 18, 2013 2:22:33 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,196
Hi,

It is possible for you to include a <link> tag in your header/footer HTML. For example:

Code: CSS
HtmlToPdf.Options.FooterHtmlFormat = 
 "<link href='your_css_file_url' type='text/css' rel='stylesheet' /> other html";


Note that here you must use full path for your CSS file url.

Thanks!
Maxim
Posted: Thursday, December 19, 2013 3:03:41 AM
Rank: Advanced Member
Groups: Member

Joined: 12/18/2013
Posts: 67
Thank you, it works! I had a thought that it might work, but forgot to try :)

Let me ask another question. This question is about having different HtmlToPdf.Options.OutputArea on pages. We generate reports which have start/title/front page with full page size background image. And what I want is having a footer (HtmlToPdf.Options.FooterHtmlFormat) on each page except the first one.

I read many topics on the forum about footer and header and what you suggested was overriding footer on the first page and it means that the space for it will still be reserved. What I want is having different OutputArea so that the whole first page will have background image and won't have the footer (or space for it, because this space reserved for footer makes some parts of the first page (with background image) go to the second PDF page).

I managed to solve it this way:
- create document
- do a request to my HTML report (via HtmlToPdf.ConvertUrl) with a special query param to remove everything from HTML except first page code
- make output area shorter, specify footer position after the end of output area
- do the second request to my HTML report without that special query param which removes first/title page code from the HTML and shows everything else and add this new HTML to the document

Code: C#
PdfDocument doc = new PdfDocument();

// Render title page
HtmlToPdf.Options.PageSize = PdfPageSizes.A4;
HtmlToPdf.Options.OutputArea = new RectangleF(0, 0, 8.27f, 11.69f);
HtmlToPdf.ConvertUrl(reportUrl + "&onlytitlepage=true", doc);

// Render other pages
HtmlToPdf.Options.OutputArea = new RectangleF(0, 0, 8.27f, 10.7f);
HtmlToPdf.Options.FooterHtmlFormat = footerHtml;
HtmlToPdf.Options.FooterHtmlPosition = 10.7f;
HtmlToPdf.ConvertUrl(reportUrl, doc);

return doc;


This way it works - I have a title page with background image in the whole A4 area (without any footer) and then other pages with footer. But it works slow. Almost 2-2.5 times slower than generation a PDF from the page without doing multiple requests.

Is there any way to accomplish this in a correct way? Not to add a space for footer to the first page at all (having different output areas in the same document)?

Thanks in advanced.
eo_support
Posted: Thursday, December 19, 2013 9:03:42 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,196
Hi,

Yes. Your method is the correct method and is probably the method that can handle most cases. Another way to do it is to use "page-break-after:always" to force a page break in your HTML after the last element of your first page. You can then use CSS to adjust contents position and output area. For example, if you wish the first page the have a smaller output area, you can use a DIV to hold the page contents and applies additional paddings on that DIV.

Thanks!
Maxim
Posted: Thursday, December 19, 2013 9:09:10 AM
Rank: Advanced Member
Groups: Member

Joined: 12/18/2013
Posts: 67
Thanks for the reply. I don't like my method, because it takes a lot of time.

So there is no way to set different OutputArea in the single PDF document built in one web request? Like Area1 for the first PDF page and Area2 for all other pages?
eo_support
Posted: Thursday, December 19, 2013 9:28:44 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,196
Hi,

Did you read my previous reply? I have already told you a different method to achieve different output area for different pages.

Thanks!
Maxim
Posted: Thursday, December 19, 2013 9:37:04 AM
Rank: Advanced Member
Groups: Member

Joined: 12/18/2013
Posts: 67
I did. Seems like we don't get each other.

I use "page-break-after: always" in my CSS for my first page in HTML. And my first page in HTML covers the whole first PDF page if I don't use page footer (HtmlToPdf.Options.FooterHtmlFormat) in PDF document. I use A4 size in PDF and my first page takes all the space the A4 paper has.

If I specify HtmlToPdf.Options.FooterHtmlFormat (and I need it for all pages except the first one) then the footer takes some space in the bottom of the first page and thus this bottom part goes to the second PDF page. I hope it's clear now.

Maybe I should have asked another question - is there any way to not add the footer (and space for it) to the first page at all?
eo_support
Posted: Thursday, December 19, 2013 9:46:13 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,196
Hi,

To use different header/footer on different pages (this is the same as "not to add footer to the first page"), you would need to use HtmlToPdf.Options.AfterRenderPage to add header/footer directly with code. That handler will be called every time a new page is rendered. You can then add whatever contents anywhere on the newly rendered page.

The previous method I stated can reduce the output area of the first page (because it's implemented with CSS padding attribute), however it can not enlarge the output area of the first page. So I am not sure exactly what you meant by "covers the whole first PDF page". If you meant by covering the entire page with no margins on the first page, but still have normal margins on all other pages, then that is not possible with the method we suggested. In that case you will need to use your method.

Adding header/footer or not should not affect the main output because header/footer are added after the main output has already been generated. So if you do not use header/footer, then header/footer does not get added. It will move some contents on the first page to the second page.

Hope this helps.

Thanks!
Maxim
Posted: Thursday, December 19, 2013 9:54:01 AM
Rank: Advanced Member
Groups: Member

Joined: 12/18/2013
Posts: 67
Hi again,

Thanks for the detailed answer.

Quote:
If you meant by covering the entire page with no margins on the first page

Yes, this is exactly what I meant. There are no margins at all.

So seems like I'll have to use my method.

Thanks for help!
eo_support
Posted: Thursday, December 19, 2013 1:09:58 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,196
You are welcome. Please feel free to let us know if there is anything else.

Thanks!


You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.