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