Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Cannot add header to pdf

See original GitHub issue

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.

Issue Analytics

State:
Created 5 years ago
Comments:5

Top GitHub Comments

3reactions

wdfc-valentyntkachevcommented, Apr 15, 2019

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>

2reactions

25MoreCJKcommented, Feb 19, 2019

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