Kendo UI DevChat Export HTML and UI Widgets to PDF with JavaScript Recap-870x220

This week on our "Kendo UI DevChat" series on web development, we cover exporting HTML to PDF. If you missed it, check out the replay as we answer questions we couldn't get to live.

Continuing our popular Kendo UI DevChat webinar series, this week we took a look at a very popular framework feature of Kendo UI: Exporting HTML to PDF. During the webinar we covered how to export generic HTML, advanced UI widgets (like the ones found in Kendo UI), exporting the Kendo UI Grid and its full contents to PDF, and how to customize these PDF documents through various configuration options. This focused mainly on code written with jQuery, but we also took a look at how the core framework can be accessed within Angular.

Webinar Recording

If you were unable to join me for the live webinar (or maybe you just want to re-watch it since it was so great!) we have published the recording on our YouTube channel.

This time around there is no sample GitHub project as the demos were fairly simple, but I do want to highlight our PDF Export live demo (which covers exporting to PDF, Image, and SVG), our demo of exporting Grid content to PDF, and the PDF drawing documentation section.

Questions and Answers

As always there were a lot of good questions coming from the crowd during the dedicated Q&A section of the webinar, and while I answered quite a few during the webinar, I also wanted to answer them in this blog post since it's easier to have on hand!

Will the styling/CSS you use with your HTML be displayed correctly in the exported PDF?
Yes indeed! We take the HTML elements and their applied styles into account when creating the HTML that is being exported. We try to make it as faithful as possible to your current state of HTML.

Can you export your own HTML using Kendo UI?
Yes, you can definitely export your own HTML! I took a bit of HTML that is generic to showcase how it can be done without being Kendo UI specific, but this can go beyond simple HTML elements.

Can you exclude HTML elements from the drawing area?
This is an interesting question, but right now there is no automatic way to take child elements within the overall HTML element you're passing and exclude them from the export.

What you could get away with is applying some "display: none;" styles throughout your document during the export phase (before you call drawDOM) and then use the promises (.done() is a good time to do this) to revert these styles again.

Are Chinese characters also supported?
Yes! This falls under the ability to use custom fonts in the PDF document that you're exporting, and this documentation section covers how you can include these fonts.

How about unicode characters?
Unicode characters are also supported but they are dependent on including the fonts they are a part of of like mentioned above.

What is needed for the proxy server used with proxyURL
There is nothing Kendo UI specific that we do with the proxy and it is not tied to a specific server-side technology. You can add this proxy as an end point to your existing REST API if desired. All that is needed is to accept three parameters coming from Kendo UI (contentType, base64, and fileName). Then the proxy should return the decoded file with the "Content-Disposition" header set. More information on what is needed in this implementation can be found under the saveAs documentation section.

Is RTL text supported?
During the webinar I mentioned that this should be possible, however I was mistaken—sorry for misleading anyone about this! Currently RTL is not supported in the PDF exportation feature of Kendo UI. If you'd like to see this added in the future please vote and comment on this feedback portal item.

What was the configuration of the Grid to export all of its data?
All the code was taken from this Export to PDF demo from the Kendo UI Grid demos.

Is it just toolbar: ["pdf"]? Is more code needed?
Honestly it's just as easy as setting the toolbar configuration option and including "pdf" in there. If you want more control over the resulting document you can use the "pdf" configuration option as well, like in the demo linked in the previous question.

Let's say I need to export page no 12, how can I do that?
You would have to programmatically go to the desired page of the Grid by using the underlying DataSource object's page method. Once that has been done you can export the rendered Grid page!

How does Kendo UI deal with a Grid having too many columns to fit in the pdf width wise?
We follow whatever is provided on the page currently. So, if no specific changes are made ahead of time and if no templates are used then whatever is currently displayed on the Grid (and however it is displayed) will be exported.

One could define a template like we do in our Grid PDF Export demo and help make things a bit more customized through CSS to ensure that everything fits nicely.

Beyond that you could also show and hide columns of the Grid to only export the most important columns of the Grid.

Does Kendo UI provide any headless browser, so that the UI can be exported to PDF in scheduled scenarios
While the export to PDF feature does not require one of our UI components, just the framework feature itself, we do not have anything specific around scheduling to help in this scenario. You would have to trigger this JavaScript code in some way to export the content currently displayed in the web page.

Can you generate PDF files on the server side with Kendo/Telerik?
Yes you can! This uses RadPdfProcessing which is available within all of our .NET UI product suites. Here, for example, is a demo that showcases the integration with UI for ASP.NET AJAX. One would need to have this .NET assembly included as a reference on the server in order to export PDF on the server-side—even with Kendo UI on the front end!

Is it possible to have grouping server side export for Excel using for large data sets?
This would be done through RadSpreadProcessing, the Excel-equivalent of the PdfProcessing library. It is certainly possible, but when it comes to large data sets one has to consider memory on the server-side as well. Nonetheless, offloading this to the server is a great way to deal with large data sets!

If you want a quick introduction, this first blog post in a series can help give you insight in to RadSpreadProcessing.

Is it compatible with Angular 4?
Yes! Later in the webinar I showcase how Angular (2+) is supported as well.

Is there a way to just have a single header and footer for the entire document, not on each page?
Currently the template functionality that we showcased is on a page-by-page basis. If you'd like to export a single header and footer on a document (header on the first page, footer on the last page) this is currently not something that is supported. Feel free to submit this as feedback for future iterations of the framework!

Are there limitations around size of exporting to PDF?

One has to keep in mind that all of this is being done on the client and the proxyURL isn't a offloading of the PDF generation to the server - it's just there to start the automatic download of the PDF file in browsers that do not support the File API. Due to this the limitations around exporting mainly comes from the browser being used and how well it can handle all of this JavaScript in memory. If you are running in to specific performance issues I recommend submitting your specific scenario in a support ticket for help from our support team!


Prefer to read instead of watch? Here is a transcript of the webinar:

00:01 Carl Bergenhem: Hey, everybody, we are just about one minute away from starting the webinar here, or at least for the 11:00 AM EST time that we have to kick things off. So I'll let everybody trickle in, maybe a minute or so after 11:00, and then we'll go ahead and get started. But for those of you that are currently on, can hear me, this is about the level that I'll have in terms of audio, so feel free to adjust all your volume buttons, I'll try to not get too excited, and so I won't be yelling too much into the microphone. But keep calm for a couple more minutes and we'll go ahead and kick things off in a bit.




01:20 CB: For those of you that are trickling in now, just giving everybody a couple more minutes as I know this kicks off at 11:00, so some folks are just seeing the calendar reminder pop up right now, and are just of course downloading GoToMeeting or whatever it might be. So just waiting one more minute or so before we go ahead and kick things off.




02:31 CB: All right, I see that we are two minutes after, and I believe that we have a little bit of a slow down of people trickling in. So with that, I'll go ahead and get things started. So welcome, everybody, to today's Kendo UI DevChat, where we will be talking about exporting your HTML and UI widgets to PDF with JavaScript. And I know I mentioned in the description of this webinar that we were going to skip over the slides, and we are. All that I'm doing here is just doing a quick little introduction so you know who I am, who's the person talking here on the other side of the webinar, right in the ether before we go ahead and get started. So my name is Carl Bergenhem, and I head the sales engineering team here at Progress specifically focusing on the developer tooling division. As a part of my role, I've been dealing with Kendo UI and anything related to JavaScript, both in web and native mobile application development in my entire career, so I kind of wanted to jump in today and walk through one of my favorite parts of the Kendo UI library, actually, which happens to be the PDF exportation portion of it.


03:36 CB: So with that being said, I promised that I would immediately jump into code, and I will go ahead and do so right now. So let me quickly alt-tab into our two main environments that we're going to be working with today. Specifically, we have of course Chrome over here, and we have the source code over here working in Sublime Text. This is a very simple setup that I have and that you'll see me go through, just because what I've done in all of our demos here is that I've copied and pasted over some of the CDN files related to Kendo UI, so that I can go ahead and not have to worry about setting up a server we're dealing with and CORS requests or anything like that.


04:13 CB: So in this particular case, what I've done for those of you that aren't familiar with Kendo UI, I've just included a couple of the styles associated with Kendo UI, I've actually included the kitchen sink. You don't necessarily need to include all these for right to left, etcetera, this is just for this particular demo. And then I've also just included the jQuery references, and the Kendo UI references, and the Angular references that we're gonna need if we're ever wanting to do something like this with Angular, for example. But outside of that to kick things off, what I've Bootstrapped here is just a simple little HTML page, right? We have a header. I have some lorem ipsum that I've copied and pasted over here, and you'll actually probably see Google complain a couple of times about about, "Hey, this seems to be Latin, shall we translate it?"


05:02 CB: And then beyond that, I also have two little inputs, so I have one of input type text and one of input type dates that I have here, and a checkbox here that we can check or uncheck. Now the reason that I did this is that I want to start off at a easy kind of scenario here, where all that we have on the page is just regular HTML elements that you might be using today in your applications.


05:27 CB: Now, in order for me to be able to export this, what I want to go ahead and do first is I want to actually throw in a button here so what I'll do is I'll do, it's a quick button. Give it an ID. I'm also going to give it a class of K button, or actually you know what? I'm just going to ignore that and I'll create this later and I'll just type in export. There we go. So I have this button now, go ahead and refresh that. As I said, Google will probably have that pop up a couple of times here. But we have this export button. Now if I wanted to, I could for example, go ahead and just pretty this up a little bit. So make this a K button, refresh it, never translate Latin, there we go. So we can just export this. Now, below here within my script tag where I have a document.ready. This is where all the magic is going to happen of course. So, the first thing that I'm going to do is I'm going to work with the export button, and let me just make sure that I grab it properly here. So we're just going to be using jQuery for our first couple of examples that we have here. But the nice thing is that while, yes, we're using jQuery specifically here, we don't necessarily need to work with jQuery in order to be able to get this PDF exportation to work. So this can work just from using plain old JavaScript if you want to, or I also have a sample that showcases how we can do this in Angular.


07:01 CB: On the click event here, I'm just going to go ahead and execute a function. And then within this function is where all the magic of the exportation is going to happen, just to make things a little bit easier. So, let me actually... Let's do this. So we have a little bit of an easier time to see things. I'll just isolate this a little bit and make sure that... There we go, we have some white space that makes this a little bit easier to read. So, now what I can do in order to be able to actually pull out this entire area, which just happens to have a class of content area, I can work with the drawing framework within Kendo UI. So this is one of the kind of secrets of the Kendo UI framework, where a lot of folks just tend to use our UI widgets, grids, charts, etcetera. But what none a ton of people are familiar with is actually that we have this drawing API that you can access to be able to either draw SVG elements or Canvas elements on the page. Now, as an extension of that, what we also have then is our PDF drawing mechanism that allows us to be able to work with the Kendo UI drawing framework, either something that we created within the drawing framework or really any HTML elements at all, and we can go ahead and export that, and use the drawing framework in order to be able to create PDF documents.


08:26 CB: So the way this is accessed is just by referencing Kendo, which we have because we include it at the top of the page, and then dot drawing, dot draw, DOM. And then within here, I can go ahead and... In this particular case, I'll just use a jQuery selector, but you can also use for example, DOM, you can get the element by ID or whatever it might be. So, I'll go ahead and just do content area here, right, so this is the selector that we have for this particular div. And then after this, I can actually use the dot then functionality here, and create a function. And we have something called a group that we will be pulling from in order to be able to get actual information of the group of the elements that we're drawing here. And also, what I'm going to go ahead and do is set up a done, as well. So we're using some promises here. All right. So, we have the then, and we have the done, now let's go ahead and actually export a PDF. So the way this works is we will return an object here that is of Kendo drawing, if I can spell drawing, there we go, the export PDF, so this is again the actual exporting of the PDF that's happening here. And then we'll pass in the group, so the group of HTML elements that we're dealing with. And then what we can do is we can define a couple of pieces of information about the PDF document.


10:10 CB: So for example, we can set the paper size. In this particular case I'm going to do auto, and then we'll see what that does in a bit. We can also set up margins. So then we have left one centimeter, say top one centimeter. Let's see, what else? We can just continue to do the one centimeter piece here, and then the bottom. And this of course can be customized, and I'll cover in a bit exactly what can be done in terms of actually tweaking these configuration options of what we have within the documentation. When we're done with this, when this kind of functionality is all finished and wrapped up, what we want to be able to do is also do as. And the reason that we do this is first of all, we want to be able to of course pull this back to the client.


11:04 CB: So this as functionality in any browser that implements the file API, it will automatically go ahead and download the file for us. So this will ensure that everything gets downloaded, it doesn't just kind of sit in memory. Also for browsers that do not support the file API, we have a proxy that can be used in order to be able to create the PDF documents and be able to actually download them. So the actual drawing and the actual generation of the file will still be on the client, it's just that the automatic download of a file relies on the file API. Just around browser security, so this proxy URL gives us a way to get around that. I'll provide it a file name, so I'll just say basic export. And then, finally, I have a proxy URL that I'm actually just going to go ahead and copy and paste in here. Now you would probably set up to your own internally within your application, or within your server, wherever it might be. But in this particular case, I just happen to be using the one that we have on our demos.


12:08 CB: So if I refresh this now and hit export, making sure that of course everything is correctly written. If I open this up, we'll now see that I have a representation of the document that I have over here, right? So, we have the header here, we have the paragraph, and then we have a couple of input elements I've been working with as well. The checkbox isn't checked, and we see that the two input elements here are blank. Even though, yes Chrome auto fills the month, day, year, item just because we set up this to be of a type date, it's still a blank input element, right? In reality it's just blank. So in this case, we went ahead and just export this as a blank element. If we go ahead and check this checkbox, hit export, you'll be able to see that. And we have a little checkbox here for this export now.


12:58 CB: So, this is just what we can do with basic HTML elements, but what if we take it a little bit further and start working with some UI widgets, for example. So in this particular case, let me replace this content area with... And I'll be doing a little bit of copy and pasting just for this sake at time here. So, I'll go ahead and just copy and paste this in, so now we have a div with an ID of sample chart, and then a button that we call a sample Kendo button, and that's really it in this particular case. So what we're going to do now is that we're also going to keep what we have here, right, because we have the content area and we're just throwing this in the content area, I'll keep this as is, but what I'll do is I'll go ahead and define two things for us.


13:49 CB: So first, I'll go ahead and say here within document.ready, I'll just go ahead and grab the sample Kendo button, and just call dot Kendo button, and actually make this a Kendo UI button, and then I can also go ahead and just grab the sample Kendo chart, and do some functionality there as well with creating a Kendo chart, and get this up and running. Now, just to not bore you guys with setting up a basic chart, what I'm going to do in this particular case is again some copying and pasting here, and if I throw that in here, what we have... Let me just refresh the page, is we have this polar chart, right, where I can set up the title, I can set up a legend. Right now we don't necessarily have a legend, but if I wanted to we can throw that in here and actually display that.


14:41 CB: I also have just a quick little series here, and this is actually grabbed from one of our demos. And then we have this Kendo UI button at the bottom as well. And the reason that I throw these in is because I just want to show you how... It doesn't really matter what kind of element that we're dealing with, because ultimately this right here, if I inspect this element, this will be an SVG element that we're dealing with, and of course the button here at the bottom, this is just a regular button element, right? So this gives you an idea of, okay, not just working with the primary tags that we might have within HTML, but actually some more advanced functionality as well. So, when I hit the export button here, really keeping the name exactly the same, basic export seven, we'll see now that we get the polar chart here, and the button here at the bottom.


15:35 CB: So without even changing any code from the actual exportation code, so you can have boilerplate export code where all you do is pass in the particular parent element that you want to be able to work with and say, "Okay, let me export this. I'll go through and I'll take everything that currently exists within those DOM elements and export them like we have here." So just by replacing the content here within this div, I can go ahead and still get that advanced functionality coming from the polar chart, and the button, and be able to export that onto my page.


16:07 CB: Now, we can take this one step further actually, and if I wanted to separate these two items into not just the content area that we have here, but maybe have two separate content areas. So, we have one top and one bottom area, we can go ahead and do so as well. So again, if I just throw in these... So, change this a little bit where I have the first content area, which is the same one that we had before, right? And then we have these tags here at the bottom, just these two quick paragraphs, again lorem ipsum, that we can work with. Beyond that, we could also set up some other buttons, so for example, we can do export first area, and I'll just go ahead and say... I'm gonna call this the first export button and not the "frist". There we go. And then I'll copy and paste this. Whoopsie, there we go. Adjust that. And call this the second. And then export second area. Go ahead and just refresh this real quick.


17:21 CB: So, we have first area, export second area. And then, just like we did before, what I can do is I can scroll down here, we can say that on the... What did I call it here? First export button, I'll just throw that in here. We can do first export button, on click there, and I called this the first content area, I'm just copying and pasting to help a little bit with the demo gods here, right? Because we know that it will probably bite us if I'm not doing that. I'll just call this basic export one. And if I just take this exact same area and call this the second export button, and second export area. So, there we go. Just call this basic export two. If I refresh this page now, what we'll see is that I messed something up with the JavaScript here, yes I did. Let me take this out here, there we go. This should go ahead and work now.


18:43 CB: Let me see why that might be happening, what I'll do is I'll actually just go ahead and quickly throw over what I know will work over here, there we go. So it's the same idea, right, we have the export first area, export second area. We have now two buttons that we can work with. And if I export the first area, and then let me go ahead and click export the second area, what we'll see is that the first area remains what we had before, right? Where we have the top area, where we have the polar chart, and the button on the bottom here. And then if I do the second area, we can see that I exclusively get the paragraph elements that we're dealing with here. So you can take the same functionality of being able to export an entire page. So you could for example, throw in the body element if you wanted to and just export everything, or we can now also start isolating individual areas of a page as well.


19:35 CB: So this gives me some flexibility of what portion of my components that I want to be able to, or my overall dashboard that I want to be able to export. So if let's say, either I don't want to export the menu and everything like that, and I just want to focus on an actual content area, I can go ahead and export it. Or if I want to be able to export individual pieces, or some grouping of functionality within my application, I can go ahead and do so all on the same page.


20:03 CB: Again, it's all just about what we're doing within this right here where we go ahead and draw the DOM. So what we're doing is we're actually taking those HTML elements, we're drawing them so to speak, right? And this will eventually allow us also to be able to export to, for example, as either an image or something else, because we're dealing with whatever the Kendo UI drawing mechanism allows us to deal with here. And then we choose export to PDF but it only will work with the particular elements that we're dealing with and passing it into here. So we can continue to use Kendo.drawing and draw DOM and be able to have all these references to various portions of our application and be able to pull that information in this way.


20:47 CB: All right. Now on top of that, we also have a lot of functionality built into some of our components. So if I, for example, let me just go ahead and clear all this out, there we go. So if I take this out, and if I just throw in some basic items in here, so let me just go ahead and take this out, there we go, simplify this a little bit. All right. I can go ahead and make this an actual div, go ahead and give this an ID of grid. So a lot of times, of course, folks want to be able to work with some more advanced components like our grid and be able to export data from said grid. Now on top of that, what happens oftentimes when dealing with an advanced widget like our grid is that you might have hundreds to thousands of rows of data that you want to be able to work with. But on the grid side of things, in order to be able to keep up functionality and be able to ensure that we don't have any performance stutters or anything like that, we're only loading a certain amount of data per page, let's say 20, or 10, or whatever it might be.


22:03 CB: Oftentimes, when we want to be able to export that PDF, we want to be able to include all the data and still make it look and feel like the grid. And this can definitely be done. So we have some functionality built into the exportation functionality of the grid where we can easily go ahead and tweak that just enough to be able to add that into our grid component. So let's go ahead and quickly just go ahead and grab this grid element here and call dot Kendo grid. What I'll go ahead and do is, again for the sake of time, I'll throw in a data source and some column definitions here for our grid. So when I go ahead and refresh the page, we should see that we have this grid that I can page through that has a total of 91 items. And this actually is coming from a live URL here, so it's hitting one of our demo services. So this is feeding data into the grid, not a problem at all, just dealing with those data. We all know how that works more or less.


23:11 CB: Now, if I want to be able to export this to PDF, we have the toolbar configuration option. And in this particular case I'll just say PDF. What that will do is at the top, we'll get the export to PDF. But that's not going to do too much, it's just going to export everything at a basic level and we'll see this initial page. So we see here how it takes up the entire page and it only has the first initial 20 items. So yes, there's some basic functionality that happens, but it's not 100% what we're looking to do. So let's see how we can pull out additional information from the grid and actually export all the data that we want. So within the grid, we have the PDF configuration options that we can deal with. And here we can for example say all pages, set that to true. So, this will automatically now export all the pages I have available. We can also set up, for example, avoid links. We can do the paper size so we know that this is supposed to be for an A4, for example. So, this is where you start seeing some of our additional configuration options that we can deal with.


24:18 CB: We can set up, again, the margin. We can do... Let's add some quick margins here. All right, there we go. On top of that, let's see, we can also set up landscape, set that to true, for example. So, you start seeing that we have quite a lot of different options that we can deal with. This scale by the way that I'm throwing in here, is just for the sake of the demo to make things look a little bit nicer. So, if I refresh the page now, export this to PDF, we'll see that we get a little bit of a loading indicator, and then now we start seeing that, okay, we have the margins, right? So, we have the one centimeter margins at the top and bottom, and as we scroll through here, we can now see that we have data that is just infinitely scrolling until we of course get to the bottom of the data list.


25:14 CB: However, we might want to, for example, take the headers that we have here and actually ensure that they're repeated. And we have actually a configuration option for that, so repeat headers, set that to true, go ahead and save that. If I refresh this, go ahead and export to PDF. One, I'll see that the headers should be repeated, repeat headers, all right. For real this time. Let's refresh the page, export it. We'll see, so now we have the headers here at the top, we have the headers here for the next item and the next one and so on and so forth. Now, we could still might want to have some additional information here, so all that we're doing now is we're just taking the grid and more or less placing it into each and every page of the PDF until we've run out of data. But if we wanted to, we could actually throw in some additional little, I guess, templates around this kind of page so we can insert some more information in there.


26:19 CB: And the way that this works is what we can take advantage of is the templating structure that exists within Kendo UI. So I'll go ahead and first of all just actually define my template, it makes it a little bit easier doing it this way. I'll give it a class here, of page template, there we go. And now, here, I can do just another div. What I'll just do now is actually go ahead and just copy and paste the rest of it in here so that you guys aren't too bored of me just typing through. And what we'll be doing here is that we have the div that I defined before, right? The class header, we have the style float right, we have a class called watermark, we have a footer that we can work with, and this is all within a X Kendo template which is a custom script tag that we have set up in order to allow us to be able to say, "Okay, this is HTML that we're not executing, but we can use this as a template at some point." Then, all that we need to do is go into the setup that I have here and just quickly, for example right here, set in a template option where I'll go ahead and grab that by the ID that we set up for it, and do a dot HTML at the end.


27:50 CB: So, this will take the template that we have here, so this page template, and it will now be used for every single page within the PDF that we export. So, if I click on export to PDF, go ahead and load that. See now that at the bottom here of every page we get for example, "Page 1 of 6." If I scroll down, let's see now, "Page 2 of 6." And we can see how it continues down here. Now we've also set up this multi page group with automatic page breaking, we say Kendo UI and again, page 2 of 6. So you can customize this area if you want to, of course. But this gives us some functionality now where we could, for example, if we wanted to be able to define these classes a little bit more and where we have watermark, footer, header, etcetera, we can go ahead and do so by just providing some CSS classes that can modify these to look a little bit more unique than what we have here.


28:44 CB: But it gives you some watermarking functionality, it gives you a further indication for the user of what is being exported, so now that you're dealing with something like the Kendo UI grid, where you don't necessarily know how many pages this will end up being, you can automatically start pulling in information, like for example, page num and total pages coming from the grid itself from the PDF exportation piece, and being able to pull that into your template and start working with that already today. So, this is all just done, again, within the PDF configuration option here. And all these various, all pages, avoid links, etcetera, that's all highlighted in the document that of course within our documentation.


29:30 CB: Now, the last demo that I have on the jQuery side, let me go ahead and throw in some code in here, because this just happens to come from one of our demos, and I wanted to highlight that. Because it does show a little bit more of an advanced scenario. So, let this hopefully load for us, there we go. We can see now that we're dealing with a demo that has a couple of different charts, it has a grid with various functionality here of course, and the group header and everything like that.


30:00 CB: Well, we can now export this as a PDF, so let me go ahead and export that as a PDF. We can also export as an image if you wanted to. And if we wanted to export as an SVG file, we can as well. But let's say for example, let's take a look at the image that we have here and we can see it's a faithful representation of just what we have displaying on the page here in the back. So this doesn't necessarily go through and actually go through all the various pages that we have within the grid, but what it will do is that it will go through an export, again, the entire page that we have here. So, if I click on export as PDF again, set this up, what I'll see is that we have an initial screen cap here of what this dashboard looks like.


30:43 CB: So, the reason that I set this up again is because we can work with a lot of various different widgets, they can be fairly advanced, and we still get a faithful representation of what was currently on the page. And I wanted to highlight, yet again, that because when we actually go through and do the export, what's happening is that we are using the drawing API of Kendo UI, so we can take advantage of that drawing API to export to other formats, like for example, SVGR image, and it doesn't just have to be PDF. So in some of these scenarios, it's either built in and taken care of behind the scenes for us, with for example, the grid or some of our other widgets. And then in other cases, you might want to start taking advantage of this in your application today, and being able to export items to PDF regardless of if it's integrated, or if it's something that's just kind of taking the entire application and exporting that.


31:34 CB: Now, one thing that I'm just going to drag over from my other screen here with some demo magic is, I wanted to showcase how this can be done also within Angular 2, or I should say Angular 2 or above, right, so any kind of Angular set up that you might have. Now, this is something that we're working on, kinda gives us a little bit of a preview, where it is eventually going to be even more than what we have here, but as long as this runs and executes... Let me actually just refresh the page. This should run on the right-hand side, but what we're doing here is actually taking advantage of the same kind of functionality that we have on the jQuery side and allows us to be able to take the core functionality of Kendo.drawing and be able to pull out that, and we eventually have this... Then of course being able to export the content, just like we did on the jQuery side. Now for some reason, this is being a little bit slow in loading, but what I wanted to just give you some insight into is that we have at this Kendo-drawing framework that's kind of included already, so you can just work with the MPM install, and be able to pull this in of course. And then we have path, texts, groups similar to what you saw before in the jQuery edition, where we had the group that's being pulled in and then we have the export PDF, PDF options and draw DOM functionality that we can work with as well.


33:10 CB: Again, it's very similar to what you saw on the jQuery side. Now, in this particular case when we scroll down, we'll be able to see that ultimately we're dealing with just a couple of quick elements on the page, so we have a button, we have the div, we have an H1, this might not actually run, so we'll see what that reasoning might be in a bit. But the idea here is that we're just working with a Kendo chart and a couple of different elements and from there, we have this draw DOM function that we're using to call the native element that we have here, so the overall set up that we have within the component. And then, very similar to before, right, using the dot then, we have the group, just like we had with the jQuery side, we have the options, so we can define by setting up the paper size, landscape to true by working with the type of PDF options.


34:01 CB: And then ultimately, we have export to PDF, we have the groups, we have the options that we pass in, and the data, and then we have the save as again. So this is functionality that you can already work with today, but we're actively having this be a part of not only our existing widget set that we have on the Angular side, but also just to make this a little bit more documented, a little bit more easier to access, but I wanted to give you folks some insight into this. This can already be done today, if you're using Kendo UI for Angular, so it's not just the jQuery edition, which by the way will cover Angular JS 1.X, but also is available on the side of Angular, where we might not necessarily have a ton of demos, so this is available today, but will be eventually.


34:44 CB: So, that is what I wanted to cover today, and I see that we have a lot of questions that have popped up, so I wanted to take some time now to stop, and go through and actually answer some of those questions. So what I'll go ahead and do is, I'm gonna throw this over to the slides that we had before, and just throw the Q&A piece up here. And as I go ahead and do that, let me go ahead and just take a look at some of the questions that have popped up now. If you have any questions now, of course you can feel free to type that away on the right-hand side, within your GoToMeeting interface.


35:17 CB: We already have a couple of folks that have popped that up here. So for example, "Can you export your own HTML code using Kendo?" That's one of the earlier questions that popped up, and hopefully throughout the demo you did see that come through, and you saw some of the just regular HTML elements that have been included, as well as some of the more advanced widgets, like the Kendo UI chart or button or whatever it might be, and you can see those export. Now, if you have other advanced widgets, if you have some of your own UI components that you've created that you wanted to be able to export, the answer is yes, those can also be exported because we're just taking the HTML, we're taking the CSS that represents the styling of those HTML elements, and we're using that within the drawing API in order to be able to faithfully represent what the content of your application is.


36:06 CB: So no matter what you throwing into your application, as long as it's HTML, if you're using Flash or something like that, you will start running into issues. But as long as you're just using plain HTML or whatever library that you might be using for some of your user experience, just using HTML and CSS, you can feel free to go ahead and start using this within your application today.


36:32 CB: Now, some folks are asking what we can do specifically with the grid, let's say, and if we have too many columns that need to fit within the application or within the width, I should say, of the application, but might not necessarily fit in a PDF format. And what will happen is that the grid will try to represent whatever is currently displaying on the screen. So if you think about what I did in a lot of the demos, the screen real estate that I had in my browser tends to be the screen real estate that pops up in the PDF element as well. And now, yes we have the margins to maybe tweak that a little bit but overall we try to work with the same resolution there.


37:14 CB: So if you have, let's say, a grid that might have a certain width and a certain set of columns then if it's currently being displayed in a way that the user wants to export it, so let's say they've narrowed it down to the couple of columns that they want to be able to have, they can feel free to export it. Now, that of course might not necessarily work depending on what kind of responsiveness that you've set up for it, either the baked in responsiveness or if you've worked with the API that we offer in order to be able to deal with responsiveness, you can of course also work with the export functionality in order to be able to tweak the columns that are currently being displayed within the grid. That's a little bit more of an advanced scenario but it could be used in order to be able to take the current set of columns, slim it down, and then export the grid.


38:04 CB: There is some functionality that can be done with that as well but generally it's going to take whatever is on the screen real estate so if the user's happy with what they're seeing currently and they export it, that's what they'll see when it pops up, in the PDF that is. Now, I have some questions around generating things on the server side. So right now the proxy that we have there is more or less just to be able to allow us to offer an immediate download link to the users that don't necessarily have a browser that supports a file API. This hasn't been taken onto the server side necessarily from at the Kendo UI point of view; however, we do have dot NET libraries, and we have PDF processing, Word processing, Excel processing. So essentially, everything that you have within the Office Suite as well as PDF that is available within the dot NET framework. So yes, we have that but it's not something that we have to cover within the Kendo UI product suite, but it is available within the other dot NET suites that we have.


39:06 CB: And so I'm not covering that in today's webinar; however, that is something that's available. Again, it's just PDF processing, and it's this library that we call, and there's a dot NET library that can be included in any sort of assembly there. A couple of folks are asking if it's compatible with Angular 4? Yes, Kendo UI for Angular works with any version of Angular. What we're trying to do is stay in lock step with what the Angular team is doing. So a couple of days hopefully only after an Angular release, you'll be able to work with the latest and greatest version of Angular. So I didn't mention Angular 2 and that was kind of a slip up on my side, I just wanted to say Angular. But yes, Angular 2, Angular 4, whatever version you're most likely targeting, you'll be able to work with the same code and functionality that we just had there.


39:58 CB: A couple of folks are asking if you can exclude items or certain elements from being exported? Currently, I would have to double check that on my side, but currently from what I know you cannot. I'm going to double check this, then after every one of these webinars, we also host blog posts that you can take a look at. I'll re-answer this question, and see if there is a way. But currently you just take the content that you have within that major element and you export that. So if you wanted to potentially export... Take some pieces out or put some in depending on what you're looking to do, you can either potentially work with that templating structure that I showcased there. Or maybe when you export, actually hide the element, so you can set up a quick display none on some of the HTML elements that you don't want to display. And then when you're done since we're working with those promises, you can then pull back that display none and then actually be able to display the element as well. It's a little bit of a workaround, but could potentially work. But let me see if there's anything else that can be done there.


41:10 CB: Somebody asked if the toolbar PDF with brackets is all that's needed? Yes, it is. That plus the PDF options. Otherwise if you just do PDF like you saw, the grid will automatically just export the current page and the grid styling and fit the entire page of the PDF element. If you want to customize things a little bit, you do the PDF options but outside of that from the grid's perspective, all you need to do is do toolbar PDF and you can start exporting PDF content already today.


41:45 CB: Someone asked if the style of my HTML page will be displayed correctly with the PDF export? Yes, it does. So as long as you have some CSS supply that whether it's scoped or whether it's from an external CSS file, that will all be pulled in. The current state of the HTML when you hit that export, will be what is being exported. So again, that's why you can even get away with things like hiding elements or adding elements depending on if they're displayed or not, it'll just take whatever's in the content element and it'll go ahead and display it for you. Yes, somebody asked if Asian characters or custom fonts are supported. And let me actually very quickly go into... I'll pull this over here. So, we do have within our documentation, have some particular pieces that you can check out. So, for example, you can work with custom fonts that you can pull in, so you have this idea of out of the box we work with just a small subset of fonts, just because we don't always expect that to be available to the user. But you can define other fonts, so you can for example, as you see here, we have Kendo.PDF.define font that you can pull in. That can easily be done. You can also work with other Unicode characters you can be able to pull in.


43:08 CB: So, for example, you can work with Font Awesome, or whatever it might be. So, any other language aside from just English or working with some non-traditional characters for example with the glyphs or whatever it might be, you can also pull that in if you wanted to. And the same thing goes then, I know that this often pops up, RTL support. That, and I actually just now see a question pop up about that. Yes, that'll also be supported. So, you can feel free to include... What you just would need to do from a Chinese character point of view is to just import some of the fonts you might be working with. Same thing if you have other kind of characters within a particular language that you want to be able to include. Or again, if you're working with some custom glyphs within CSS that you want to be able to add in, you can feel free to work with what we have within the documentation as well. That is possible, and then RTL of course on top of that is possible as well.


44:08 CB: So, you guys are continuing to pour in some questions, I'm doing a lot of talking here. And what I do want to do is just pull this information into a blog post, and post it up and answer some of the questions there as well with links. Right now, there's been a lot of me saying, "Yes, you can do that." And with a couple of promises here and there, of it can be done by following this documentation article, whatever it might be. So, what I'm going to do is shortly after this, maybe either later today or tomorrow, depending on how fast I can write and answer the questions, I'll put together a blog post and be able to answer some of these additional questions. And then of course, you will be able to of course export, take all that content in there and export that into your data bank, and be able to use that to be able to follow some of the links, follow some of the examples. That can give you some further insight.


45:02 CB: So, with that, folks, I do appreciate everybody coming out today and taking a look at the PDF exportation functionality here. And look forward to that blog post, I'll tweet about it. The Kendo UI Twitter handle will tweet about it, so feel free to just take a look out for that. And I'll continue to answer some questions there. Thank you very much, everybody. And enjoy the rest of your day.

Carl Bergenhem
About the Author

Carl Bergenhem

Carl Bergenhem is the Product Manager for Kendo UI. Throughout his time at Telerik/Progress he has covered the entire portfolio of products offered, but mainly spent his time in the web development arena covering ASP.NET Ajax, ASP.NET MVC, and JavaScript-based products. He’s passionate about web technologies and tries to stay on top of all JavaScript libraries and frameworks relating to Kendo UI, developing with jQuery, Angular, React, and Vue.js on a regular basis. In his free time Carl enjoys slaying virtual monsters, snowboarding and playing his guitar.

Related Posts


Comments are disabled in preview mode.