Cannot add header to pdf

dundurlunka commented 6 years ago

I want to generate a pdf file from HTML created dynamically in the code. I succeeded in adding a footer to all the pages, but cannot add header. I don't know where's the problem since the method is the same. Currently, I am developing it on a Console App. Here's the code

public class PdfGenerator
    {
        private IConverter _converter;

        public PdfGenerator()
        {
            this._converter = new SynchronizedConverter(new PdfTools());
        }

        public void GeneratePdfFile(string html)
        {
            var globalSettings = new GlobalSettings
            {
                ColorMode = ColorMode.Color,
                Orientation = Orientation.Portrait,
                PaperSize = PaperKind.A4,
                DocumentTitle = "PDF Report",
                Margins = { Top = 10 },
                Out = @"..\..\..\employee-report.pdf"
            };

            var objectSettings = new ObjectSettings
            {
                PagesCount = true,
                HtmlContent = html,
                WebSettings = { DefaultEncoding = "utf-8", UserStyleSheet = @"..\..\..\htmlTemplate.css" },
                HeaderSettings = { FontName = "Arial", FontSize = 9, Line = false, HtmUrl = @"..\..\..\header.html"},
                FooterSettings = { FontName = "Arial", FontSize = 9, Line = false, HtmUrl = @"..\..\..\footer.html", Left = "" }
            };

            var pdf = new HtmlToPdfDocument()
            {
                GlobalSettings = globalSettings,
                Objects = { objectSettings }
            };

            _converter.Convert(pdf);
        }
    }

Header html:

<div class="head">
    <div class="left">
        <img id="logo" src="logo.jpg">
    </div>
    <div class="right">
        <h3><span>Professional Experience</span></h3>
    </div>  
</div>

Footer html:

<div class="footer">
    <div id="footer-left">
            Text<br>
                Text
    </div>
    <div>
        Text<br>
                Text
    </div>
</div>

I tried to render the footer as a header, just for testing purposes. When I tried to open the pdf in browser it returned an error: Microsoft Edge: "Couldn’t open PDF" Google Chrome: Just opens the pdf editor without any pages.

Adobe reader opens the document but the header is still missing.

SIM128 commented 6 years ago

I have the same Issue.

Did you solved it?

The only confusing thing I've found is that there are two typos.

https://github.com/rdvojmoc/DinkToPdf/blob/b0546d21641eaef71f6fe0ddfd3998e8502baab7/src/DinkToPdf/Settings/HeaderSettings.cs#L57 https://github.com/rdvojmoc/DinkToPdf/blob/b0546d21641eaef71f6fe0ddfd3998e8502baab7/src/DinkToPdf/Settings/FooterSettings.cs#L57

But the typos are in Footer aswell so I guess thats not the problem?

Btw. the Header.html and Footer.html should both have the <!DOCTYPE html> tag and maybe the <html>, <body> and <head> tag.

25MoreCJK commented 5 years ago

I had the same issue. Setting a specific height for the header (in the html) solved it for me.

jeremyLJ commented 5 years ago

I had the same issue. Setting a specific height for the header (in the html) solved it for me.

Hello 25MoreCJK, I had the same issue, could u pls demo how to set the height of the header in the html? Thanks.

wdfc-valentyntkachev commented 5 years ago

As I understand, it's artificial restriction, but you can't depend on in-memory html header, you should depend on existing, stored on disc, html file that will be a header:

var objectSettings = new ObjectSettings
{
    PagesCount = true,
    HtmlContent = GetReportBydy(model, data),
    WebSettings = {DefaultEncoding = "utf-8", EnableIntelligentShrinking = false},
    FooterSettings = {FontName = "Arial", FontSize = 9, Right = "Page [sitepage] of [sitepages]"},
    HeaderSettings = { FontName = "Arial", FontSize = 9, Line = false, HtmUrl = @"..\ReportHeaderTemplate.html", Left = "", Spacing = -40 },
};

I'll appreciate if someone will show more reasonable example, but in my case dinkToPdf generating header far above the visible canvas, so I add negative spacing to make it visible. This part of code did the trick for me: HeaderSettings = { ... Spacing = -40 }, Furthermore, header appears on top of document body, problem for future to configure it in reasonable way. And html itself looks like this:

<!DOCTYPE html>
<html lang="en" xmlns="http:\\www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        .header-row {
            display: inline-table;
            margin-bottom: 35px;
            flex-direction: row;
            width: 95%;
        }

        .logo-block {
            display: table-cell;
            width: 200px;
            height: 115px;
        }

        .logo {
            width: 115px;
            height: 115px;
            background-image: url(http://server.int:4500/assets/images/logo.svg);
            -ms-background-position: center;
            background-position: center;
            -ms-background-repeat: no-repeat;
            background-repeat: no-repeat;
            -ms-background-size: 100%;
            background-size: 100%;
        }

        .report-info {
            margin: auto;
            text-align: center;
            display: table-cell;
            vertical-align: middle;
        }
    </style>
</head>
<body>
<div class="header-row">
    <div class="logo-block">
        <div class="logo"></div>
    </div>
    <div class="report-info">Test</div>
</div>
</body>
</html>

elmerjimenez commented 2 years ago

dundurlunka How to solved the issue i have the seme troueble add HeaderSettings = { ... Spacing = -40 }, but the pdf no don´t show header

rdvojmoc / DinkToPdf

Cannot add header to pdf #54