Kendo.mobile export to PDF

[David]

Is export to PDF compatible for mobile?  I have been trying to use kendo.drawing but it is not working.

[Tina Stancheva]

Hello David,

If you are reviewing the Kendo UI Grid/Scheduler/Chart widgets export to PDF, then this functionality will not work out-of-the-box in a hybrid Cordova-based application. However, the Kendo Drawing API should help you capture the content of your view and save it in a pdf document. You can use the Cordova File API to write the data in a file and save it on the device's storage. I attached a sample project that demonstrates how to 'draw' the contents of a Kendo UI view - in this case a Kendo UI Grid widget, in a pdf document. The project demonstrates how to save the pdf document on the device and then open it in InAppBrowser

Regards,
Tina Stancheva
Telerik

 

 

[Nicola]

Hello Tina,

I tried your solution and it works very well.
Just one question: how can I use different fonts ?
I loaded the file .ttf in the folder 'styles/font' of the application. (I need offline behavior, I can't specify online url)
I placed the call kendo.pdf.defineFont (...) , but I'm not able to specify a valid path. 
I tried with a relative one, an absolute path with http, an absolute one with 'file:// ' (from view's location.href) . etc .. 
For each call I always get the error "Can not load font from ...". What is the correct way to specify the font's path ?

[Tsvetina]

Hello Nicola,

Usually, a relative path, should work when linking the ttf files. If the issue persists, please open a support ticket and send us a project where we can reproduce and debug the problem.

Regards,
Tsvetina
Telerik

 

 

[Nicola]

Hello Tsvetina,
you are right. I had an old release of Kendo UI. With the new one is all right.
Thanks
Best Regards

Nicola  

[Michele]

Hello Tsvetina,

I've a problem exporting PDF with custom fonts. I tried using kendo.pdf.defineFont like this:

kendo.pdf.defineFont({
   "RobotoStamp"     : "kendo/fonts/Roboto/RobotoCondensed-Regular.ttf",
   "RobotoStamp|Bold": "kendo/fonts/Roboto/RobotoCondensed-Bold.ttf"
})

but it gives the following error, on the simulator and on the device: 

Uncaught Error: Cannot load font from kendo/fonts/Roboto/RobotoCondensed-Regular.ttf" at file: kendo/js/kendo.all.min.

It doesn't work also if I use the absolute path to the font; it seems that this function tries to find the files without using the base path.

 

If I don't specify the font-family in the css rule of the page to export, it tries to find automatically the dejavu font but it doesn't find it on the device (on the simulator it works), also if the ttf files are in the correct place:

"Uncaught Error: Cannot load font from file:///data/....../kendo/styles/fonts/DejaVu/DejaVuSans.ttf?v=1.1"

 

I tried to define the custom font in the css file using @font-face and then giving the same font-family to the the style of to the div to export, but it can't find it and gives the same error (on the simulator it works correctly) :

"Uncaught Error: Cannot load font from file:///data/..../styles/fonts/Roboto/RobotoCondensed-Regular.ttf"

 

Last try: Giving an inexistent font-family to the page to export in the css rule, ( es. font-family:'' ) it works without giving any error and it uses a standard font.

 

Recap:

1. The function kendo.pdf.defineFont never works, neither on the device nor on the simulator.
2. Defining the custom ttf font using @font-face doesn't work on the device, but works on the simulator.
3. Defining an inexistent font-family on the div style to export, works using a standard serif font.
4. Not defining any font-family attribute on the div style, doesn't work on the device, because it tries to find the DejaVu Sans font.
5. The DejaVu Sans font is correctly found on the simulator, but not on the device.

 

Can you help me?

Thanks.

Michele

[Tsvetina]

Hello Michele,

Declaring the custom fonts using @font-face should work if you load your font from a web location:

@font-face {
  font-family: "RobotoStamp";
  src: url("http://linkToFont") format("truetype");
}

Regards,
Tsvetina
Telerik

 

 

[Michele]

Hello Tsvetina,

thank you for answering me. The problem is that my app must work offline so I've to put my fonts in the app's folders ( for example in kendo/style/fonts ) or in the device's local storage.

In this way the export works on the AppBuilder's simulator, but not on my Android devices.

Infact, if I give to my div style, a font-family that is located in my style folders, it tries not to find that font, but tries to find the Dejavu Sans, without success. The same happens if I not give any font-family attribute to my div style.

The PDF export works correctly only if I give an inexistent font-family: in this way, I can see on the exported PDF, that it uses a standard serif font.

That problem occurs only in the exporting of PDF, infact I can see correctly my fonts in the app views; so I think that maybe it can be a kendo bug, or maybe it's managed only for working online, using fonts from web locations.

Regards,
Michele

[Tsvetina]

Hi Michele,

I checked again with the Kendo UI team and indeed the font files should be loaded via a web server. In a web site (where the export feature has been designed for), this is usually the same web server where the source code is hosted and this isn't a problem but in a Cordova app this comes as a limitation.

You can browse around for other PDF export libraries specifically designed for Cordova if working offline is a must. There is a post here that could be useful. 

Regards,
Tsvetina
Telerik

 

 

[ghost]

Dear 
Tina Stancheva 
I downloaded your sample project .It works well in simulator but failed while deploying to phone when we click EXPORT TO PDF button it shows an error " cant display PDF " can you say what is the problem 
the Screenshot of error is given below 
Thanks  

[Garo]

Hello,

I have addressed this issue in the separate support ticket that you have opened. I would recommend that we keep the discussion there as this will ensure a more consistent and easy to follow communication.

Regards,
Garo
Progress Telerik