Telerik Words Processing - No line strike through from HTML to PDF - telerik

Question

I am working with Telerik Word Processing (WP) and in some instances the HTML output on screen has a line strike through to show that an event is cancelled.
Because of how the WP works, it cannot use CSS in the standard way using links and relative paths so am using style tags in the CSHTML file.
If in the page I use
.cancelled-event {
color: #c82333;
text-decoration: underline !important
}
The text is underlined and is coloured correctly, if I use
.cancelled-event {
color: #c82333;
text-decoration: line-through !important
}
I just get the text the right colour.
Overline also does not work, however only tested this to ensure that Im not being an idiot (doesn't mean Im not, but still one of the easy checkables)
What I would like help with is,
Has anyone else experienced this? If so how did you resolve it,
What other suggestions, is there to get
The CSHTML page is as below, munis code that will bloat this question.
<style>
.date-selection {
border: 1px solid #8c8c8c;
background-color: #ffffff
}
.cancelled-event {
color: #c82333;
text-decoration: line-through !important
... more styles here...
}
</style>
<img src="http://localhost:8001/images/logo.png" />
<br/>
<partial name="~/Views/Roster/_RosterAgenda.cshtml" model="#Model" />
I konw the strike through does show in 2/3 scenarios.
In view - works
In view where export should be as I have an exit where I can push the data to a view before pdf - works
In PDF - doesnt work.
PDF Generation is being done like this, the byte array that is passed in is base 64 encoded as the original file information is being passed from one System to an API over the wire.
public byte[] ConvertHtmlToPdf(byte[] fileData, string extension, PageSettings.PageOrientation orientation)
{
byte[] convertedData = null;
var base64EncodedBytes = Convert.FromBase64String(Encoding.Default.GetString(fileData));
var html = Encoding.UTF8.GetString(base64EncodedBytes);
HtmlFormatProvider htmlProvider = new HtmlFormatProvider();
RadFlowDocument document = htmlProvider.Import(html);
IFormatProvider<RadFlowDocument> provider = this.providers
.FirstOrDefault(p => p.SupportedExtensions
.Any(e => string.Compare(extension, e, StringComparison.InvariantCultureIgnoreCase) == 0));
if (provider == null)
{
Log.Error($"No provider found that supports the extension: {extension}");
return null;
}
var quality = Telerik.Windows.Documents.Fixed.FormatProviders.Pdf.Export.ImageQuality.Medium;
PdfFormatProvider formatProvider = new PdfFormatProvider();
formatProvider.ExportSettings.ImageQuality = quality;
if (document.Sections.Any())
{
foreach (var section in document.Sections)
{
//section.PageOrientation = orientation == PageSettings.PageOrientation.Landscape ? PageOrientation.Landscape : PageOrientation.Portrait;
section.Rotate(orientation == PageSettings.PageOrientation.Landscape ? PageOrientation.Landscape : PageOrientation.Portrait);
}
}
using (var stream = new MemoryStream())
{
formatProvider.Export(document, stream);
convertedData = stream.ToArray();
}
return convertedData;
}

Answer 1

I found a better, easier, nicer way, but this only works if you have the Kendo Tools license too.
$(".export-pdf").click(function() {
// Convert the DOM element to a drawing using kendo.drawing.drawDOM
kendo.drawing.drawDOM($(".content-wrapper"))
.then(function(group) {
// Render the result as a PDF file
return kendo.drawing.exportPDF(group, {
paperSize: "auto",
margin: { left: "1cm", top: "1cm", right: "1cm", bottom: "1cm" }
});
})
.done(function(data) {
// Save the PDF file
kendo.saveAs({
dataURI: data,
fileName: "HR-Dashboard.pdf",
proxyURL: "https://demos.telerik.com/kendo-ui/service/export"
});
});
});
As per usual Telerik documentation is awful, and to find anything you want you almost have to start looking for something else. However, this code was found at
https://www.telerik.com/blogs/5-ways-export-asp-net-word-pdf-file
The benefit of this, and once again this only works if you have UI for xxx. In this instance I am using UI for ASP.Net Core and also using Typescript which needed a modification to the definately typed file kendo.all.d.ts too.
function drawDOM(element: JQuery, options: any): JQueryPromise<any>; //Existing code in the d.ts file
function drawDOM(element: JQuery<HTMLElement>);
function drawDOM(element: any, options?: any): JQueryPromise<any>;
But this is \ was down to not passing in a type of jquery object of HTMLElement. This makes it a little more robust enabling you to pass more into it.
I suspect that this answer will only be of use to a small number of people, however, hopefully this will help someone in the future.