DinkToPdf
DinkToPdf copied to clipboard
Cannot add header to pdf
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.
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.
I had the same issue. Setting a specific height for the header (in the html) solved it for me.
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.
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>
dundurlunka How to solved the issue i have the seme troueble add HeaderSettings = { ... Spacing = -40 }, but the pdf no don´t show header