Pack Fonts for PDF Export with the Drawing Library
Environment
| Product | Progress® Kendo UI® Drawing API |
| Operating System | Windows 10 64bit |
| Visual Studio Version | Visual Studio 2017 |
| Preferred Language | JavaScript |
Description
How can I transform the content during the PDF export while applying the Kendo UI Drawing API?
Solution
To provide better quality for the output in PDF, the library requires access to the same fonts as the browser uses to display the elements that are produced. Otherwise, neither the layout of the PDF, nor the non-ASCII characters are properly displayed.
To declare the fonts, you need to:
- Write the appropriate
@font-facerules in the CSS. - Host the CSS file on the same domain as the page.
- Keep the font files on the same domain too. Otherwise, you need to make sure that the server, which hosts the fonts, sends the proper HTTP access control (CORS) headers.
Also, when declaring the fonts, it is not possible to serve the page over the file:/// URLs when needed—for example, in mobile applications.
The @telerik/kendo-pack-fonts module packs one or more fonts into JavaScript code. In this way, you can load that code by using a <script> tag.
The packed code works:
- Regardless of the location you store it—this means that you do not need CORS headers.
- Even if the page is loaded to the
file://URL, because you do not need an AJAX request to load the fonts into the Kendo UI PDF library.
For more information, refer to the project on GitHub.