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!