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

Export PDF missing fonts for non latin characters

5 Answers 326 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
chris
Top achievements
Rank 1
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

Sort by
0
Neli
Telerik team
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/.

0
chris
Top achievements
Rank 1
answered on 04 Jan 2021, 12:38 PM
Hi thanks for your reply. I'm still having some trouble with this. Ideally I don't want to host the font files, is it possible to define system fonts, the same way the browser seems to be doing? Or do non ascii codes have to have embedded fonts which must be hosted?
0
chris
Top achievements
Rank 1
answered on 04 Jan 2021, 03:23 PM
Sorry I cannot see an edit button. I have now got it working hosting a font file. (only change to above code is the full url being provided) but I'd still like to know if this is necessary. Many of the recommended font I guess will have to be paid for as now I will be distributing them? 
0
Neli
Telerik team
answered on 07 Jan 2021, 11:56 AM

Hello Chris,

I am glad that the issue is resolved. It seems that the question is related to the Kendo UI product. I transferred the ticket to the team, so later you will receive a response from them.

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/.

0
Ivan Danchev
Telerik team
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

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/.

Tags
General Discussions
Asked by
chris
Top achievements
Rank 1
Answers by
Neli
Telerik team
chris
Top achievements
Rank 1
Ivan Danchev
Telerik team
Share this question
or