This is a migrated thread and some comments may be shown as answers.

Export PDF missing fonts for non latin characters

5 Answers 2680 Views

General Discussions

This is a migrated thread and some comments may be shown as answers.

chris asked on 23 Dec 2020, 03:36 PM

I have been given the task to look at a pdf export that can now export in languages with non latin characters (e.g. chinese/japanese/etc)

the exports just show squares instead of the characters which are displayed correctly in the preview.

I believe I need to embed a suitable font but I'm not having much luck. Am I missing something or approaching the problem in the wrong way?

My export function looks like this:

exportPdf: function (domElementId, fileName, landscape) {

kendo.pdf.defineFont({

"unicode-font": '../fonts/Unicode/unicode-font.ttf'

});

kendo.drawing.drawDOM('#' + domElementId, {

forcePageBreak: ".page-break",

paperSize: "A4",

landscape: typeof landscape !== 'undefined' ? landscape : false,

margin: "1cm",

template: $("#pdf-page-template").html(),

})

.then(function (group) {

return kendo.drawing.exportPDF(group, {});

})

.done(function (data) {

kendo.saveAs({

dataURI: data,

fileName: fileName + ".pdf"

});

}

I'm wondering if the relative path is the problem but I don't see any errors. I didn't set this up and have very little experience with your tools so I'm sure I am just missing something obvious.

Thanks for your help.

5 Answers, 1 is accepted

answered on 28 Dec 2020, 07:05 AM

Hi Chris,

I am sorry to hear that you are experiencing such an issue with our product. We have had similar problems before. Mostly, they are related to the used font which in PDF is treated in a different way, especially, if you render the report in Linux. When the report is rendered in PDF (this includes printing, which is essentially rendering in PDF and sending the produced document to the printer), the reporting engine relies on the GDI+ routines to provide the correct Unicode characters from the font, specified in the report definition.

I would recommend using a font that supports all characters from the Chinese Unicode Range. Here is a list of fonts that cover all or the most of the Chinese characters - you can try some of them and see if the issue will be resolved.

Please try the suggestions above and let us know if the problem has been resolved.

Regards,
Neli
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

answered on 08 Jan 2021, 02:36 PM

Hello Chris,

Here's an exemplary page that demonstrates how special characters (in this example Korean, but the approach is valid for Chinese, Japanese, etc.) can be exported with Kendo Drawing:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>PDF export header footer</title>

    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2020.3.1118/styles/kendo.common.min.css">
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2020.3.1118/styles/kendo.rtl.min.css">
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2020.3.1118/styles/kendo.default.min.css">

    <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2020.3.1118/js/kendo.all.min.js"></script>

    <style>
        #container {
            font-family: "CODE2000";
        }
    </style>
    <script>
        kendo.pdf.defineFont({
			"CODE2000": "Content/fonts/CODE2000.TTF"
        });

        function getPdf() {
			kendo.drawing.drawDOM($("#container"))
				.then(function (group) {
					// Render the result as a PDF file
					return kendo.drawing.exportPDF(group, {
						paperSize: "auto",
						margin: { left: "1cm", top: "1cm", right: "1cm", bottom: "1cm" }
					});
				})
				.done(function (data) {
					// Save the PDF file
					kendo.saveAs({
						dataURI: data,
						fileName: "test.pdf"
					});
                });
        }
    </script>
</head>
<body>
    <button onclick="getPdf();">get pdf</button>
    <div id="container">
        <p>test</p>
        <p>변환되어지면 한글이 깨짐</p>
    </div>
</body>
</html>

Note that the font is applied to the exported content (the div element with id="container") with CSS. The font is mapped through the defineFont method.

You must use a font that supports special characters. In this example the CODE2000 font is used, but it can be replaced with another font that supports special characters, for example Arial Unicode MS. Also note that the font file must be present in the project, as shown in the code snippet above ("Content/fonts/CODE2000.TTF").

Give this a try and let us know the results.

Regards,
Ivan Danchev
Progress Telerik