I have problem with converting HTML to PDF with c# coding. Namely, I go through next steps:
1) creating HtmlFormatProvider
2) registering event LoadStyleSheetFromUri
3) importing Stream with HTML content. Content contains reference to bootstrap.css, Bootstrap v4.3.1 (https://getbootstrap.com/)
4) creating PdfFormatProvider
5) exporting to pdf.
Complete code is following:
public async static Task<InputSignDocument> CreateDemoDocument(string wwwPath, string fileName, string extension, string recipientName, string recipientEmail, Func<Task<Stream>> getPdfStream)
{
var result = new InputSignDocument()
{
FileName = fileName,
FileExtension = extension,
};
Stream inpuContent = await getPdfStream(); // here is reading html into stream
var htmlProvider = new HtmlFormatProvider();
HtmlImportSettings importSettings = new HtmlImportSettings();
importSettings.LoadStyleSheetFromUri += (s, e) =>
{
string styles = File.ReadAllText($"{wwwPath}\\{e.Uri}");
e.SetStyleSheetContent(styles);
};
importSettings.DefaultStyleSheet = "body {white-space: normal;}";
htmlProvider.ImportSettings = importSettings;
RadFlowDocument doc;
using (StreamReader reader = new StreamReader(inpuContent))
{
string htmlText = reader.ReadToEnd();
doc = htmlProvider.Import(htmlText);
}
var pdfProvider = new Telerik.Windows.Documents.Flow.FormatProviders.Pdf.PdfFormatProvider();
PdfExportSettings exportSettings = new PdfExportSettings()
{
};
pdfProvider.ExportSettings = exportSettings;
result.FileContent = new MemoryStream();
pdfProvider.Export(doc, result.FileContent);
return result;
}
PDF is created however no bootstrap classes are apllied.
In debug session I look in variable (string styles) in event, css file was read properly.
HTML contains two references:
<link rel="stylesheet" href="/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="/css/site.css" />
From event I see that both files are exported.
In HTML, namely, in razor view are used bootstrap classes: container, col-lg-6, col-md-6, col-sm-6, row.
rhey are applied this way:
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4">
<label>Werknemer</label>
<div>
/fnm1/
</div>
</div>
<label></label>
<div class="col-lg-4 col-md-4 col-sm-4">
<label>Handtekening</label>
<div>
/sn1/
<hr />
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 docusign-basetab">
<label>Aangetekend op</label>
<div>
/ds1/
</div>
</div>
</div>
</div>
</div>
</div>
It seems that this part css is not applied in PDF File.
What I am missing?
When I run the view from controller it shows me this:
And in pdf it looks like this:
1 Answer, 1 is accepted
Hello Jamal,
The document layout is based on div elements to achieve a look similar to a table. When importing, HtmlFormatProvider parses all div elements as paragraphs. Since the paragraphs in flow documents cannot be laid out the same way as divs on a browser page, the conversion leads to changes in the layout of the elements. What I can suggest in this case is to use tables instead of divs. This will ensure proper conversion between different formats.
I hope this helps. Should you have any other questions do not hesitate to ask.
Regards,
Dimitar
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.
Rank 1
Thanks, Dimitar, it works but partially.
I have put in place of divs table like that:
<div class="container-fluid">
<table class="table">
<thead>
<tr class="d-flex">
<th scope="col" class="col-4 none-border">Werknemer</th>
<th scope="col" class="col-2 none-border">Handtekening</th>
<th scope="col" class="col-2 none-border">Aangetekend op</th>
</tr>
</thead>
<tbody>
<tr class="d-flex">
<td class="col-4 only-bottom-border">
/fnm1/
<hr />
</td>
<td class="col-2 only-bottom-border">/sn1/
<hr/>
</td>
<td class="col-2 only-bottom-border">/ds1/
<hr/>
</td>
</tr>
</tbody>
</table>
</div>
It shows border, which I do not like. Therefore I have added styling directly in the HTML like that:
<style>
.table thead th.none-border {
border: none;
}
.table td.only-bottom-border {
border: none;
}
</style>
If I run the view from controller it comes this way:
And in PDF this way:
Should I think that styling of table not working during parsing?
Kind regards,
Jamal
Rank 1
Thanks, Dimitar, it works, but partially.
Html of table part looks like following:
<div class="container-fluid">
<table class="table">
<thead>
<tr class="d-flex">
<th scope="col" class="col-4 none-border">Werknemer</th>
<th scope="col" class="col-2 none-border">Handtekening</th>
<th scope="col" class="col-2 none-border">Aangetekend op</th>
</tr>
</thead>
<tbody>
<tr class="d-flex">
<td class="col-4 only-bottom-border">
/fnm1/
<hr />
</td>
<td class="col-2 only-bottom-border">/sn1/
<hr/>
</td>
<td class="col-2 only-bottom-border">/ds1/
<hr/>
</td>
</tr>
</tbody>
</table>
</div>
except that I have added local style definition to remove table borders:
<style>
.table thead th.none-border {
border: none;
}
.table td.only-bottom-border {
border: none;
}
</style>
And now running from controller looks like this:
And in PDF like this:
Should I think that styling is not working on table as well?
Kind regards, J. Samedov
Hi Jamal,
I was able to reproduce the case with the different borders. It seems that the presence of the properties is not in order in this case and the style is taken from the bootstrap.css file. I have logged this issue on our feedback portal. You can track its progress, subscribe to status changes, and add your comment to it here. I have updated your Telerik points as well.
As a workaround, I can suggest using a single class for the table where all styles are set.
Thank you for your understanding.
Rank 1
I have solved this. in case of inline style it works. Thanks Dimitar
But of course it will be nicer to work from CSS file.