Welcome Guest Search | Active Topics | Sign In | Register

HtmlToPdf won't render Telerik Kendo components Options
Mathias Andreasen
Posted: Wednesday, January 10, 2018 7:38:17 AM
Rank: Newbie
Groups: Member

Joined: 1/10/2018
Posts: 1
Hello there,

I work in a small team and we've been using EO.Pdf for quite some time now, and I can't say that we have encountered any problems - until now!

The project we're working on requires us to show complex diagrams in our PDF-documents, in order the render these diagrams and charts we use Telerik's Kendo UI library, and for some reason these components won't render when we output our PDF.

After some detective work online I found this thread which brought me to this forum:
got problem to call MVCToPDF when printing Ajax load document

.. in that thread, the OP seems to have solved it by not mixing server-side and client-side rending of the Kendo-components, but as far as I can tell we are not mixing server- and client-side rendering like he did.

Another forum thread said that we need to increase the MinLoadWaitTime to something around 3 seconds, this hasn't worked either as we have even tried setting it to 1 full minute, which should be more than enough time for the components to render.

Here's a snippet of our PDF-document with the component that we are trying to render:
Code: HTML/ASPX
<div class="box diagramHållare floatLeft">
                @(Html.Kendo().Chart(Model.AvstegPerEnhet)
                    .Name("AvstegPerEnhet")
                    .Legend(legend => legend.Position(ChartLegendPosition.Custom).Offset(15, 265).Color("#666")
                    )
                    .Title(title => title.Text("Avsteg per enhet")
                        .Align(ChartTextAlignment.Left)
                        .Color("#666")
                        .Font("bold 14px Arial,Helvetica,sans-serif"))
                    .ChartArea(chartArea => chartArea.Background("transparent").Height(312).Margin(0, 0, 52, 0))
                    .SeriesDefaults(series => series.Bar().Overlay(ChartBarSeriesOverlay.None).Stack(true))
                    .Series(series =>
                    {
                        series.Bar(model => model.Antal).Name("Antal avsteg").Color("#fbaf3a");
                    })
                    .CategoryAxis(axis => axis
                        .Categories(model => model.Benämning)
                        .MajorGridLines(lines => lines.Visible(false))
                        .Color("#666")
                    )
                    .ValueAxis(axis => axis
                        .Numeric()
                        .Max(Model.AvstegPerEnhet.Max(x => x.Antal + 2))
                        .Line(line => line.Visible(false))
                        .MajorGridLines(lines => lines.Visible(true))
                    )
                )
            </div>


Our project uses ASP.NET MVC so our Model get's passed into the component via Razor web pages (Model.AvstegPerEnhet)

I am at a loss as to what is causing this problem, and can't really see a way forward other than to try my luck by posting here ;)

We are using EO.Pdf.Mvc Version=15.3.43.0

Cheers!

// Mathias

eo_support
Posted: Wednesday, January 10, 2018 8:49:40 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,221
Hi,

Without actually dig into KindoUI here are the things you can try:

1. Try to run our EOPdfDemo application and convert the page directly through the sample's HTML to PDF -> Basic -> Convert Url demo. If the page converts fine, then the problem is most likely in the MVCToPDF part. If not, then the problem would be in the conversion engine part;

2. Try to set HtmlToPdf.Options.ZoomLevel to a value less than 1. This will decrease the zoom level and effectively increase the internal "browser window" width. As screens get bigger and bigger, the optimal width of a typical web page gets wider and wider. So if a page is not designed to work well on a narrow browser window, you may run into issues with EO.Pdf because the default "browser window" width for the HTML to PDF converter is much smaller than the typical screen width;

3. Try the latest build and see if it works. Web browser updates very fast these days and it's not uncommon that a web page works well with the latest browser but does not work well with earlier versions. EO.Pdf version 15 is based on a rather old WebKit based browser engine dated back in 2011. So if the page relies on some newly introduced feature/JavaScript API that does not exist or don't work well in the older browser engine, you may run into issues. The current version is based on Chromium V62, so it is quite up to date and it should work much better with modern web pages;

Hope this helps to get you closer to the root of the problem.

Thanks!


You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.