I need to download the contents of a div to a pdf. there are some currency symbols as unicode which are not getting rendered in the pdf
self.pdfPrint = function () {
kendo.drawing.drawDOM($("#content"))
.then(function (group) {
return kendo.drawing.exportPDF(group, {
paperSize: "auto",
margin: { left: "1cm", top: "1cm", right: "1cm", bottom: "1cm" }
})
})
.done(function (data) {
kendo.saveAs({
dataURI: data,
fileName: "file.pdf",
});
});
}
1 Answer, 1 is accepted
0
Hello Anshita,
For a special character to be exported a font that supports such character must be applied to the HTML element that contains it. Consider the following example:
<body>
<style>
#curencySymbols {
font-family: "CODE2000";
}
</style>
<script>
kendo.pdf.defineFont({
"CODE2000": "Fonts/CODE2000.TTF"
});
</script>
<script type="text/javascript">
var generatePDF = function () {
kendo.drawing.drawDOM("#curencySymbols", {
paperSize: 'auto',
margin: { left: "1cm", top: "1cm", right: "1cm", bottom: "1cm" }
}).then(function (group) {
kendo.drawing.pdf.saveAs(group, "currency.pdf")
});
};
</script>
<button onclick="generatePDF();">Download</button>
<div id="curencySymbols">
Yen:
<p>¥</p>
Un-supported Indian Rupee sign:
<p>₹</p>
Supported Indian Rupee sign:
<p>₨</p>
<p>₽</p>
<p>元</p>
<p>$</p>
<p>¢</p>
<p>£</p>
<p>€</p>
<p>¥</p>
</div>
</body>
As you can see the CODE2000 font is applied to the exported element #currencySymbols. Within it there are a number of currency symbols, some of them added with their hex code (¥ for example) others with their HTML entities (€ for example). This font supports special characters, however there are certain currencies that it does not support, for example: ₹ Thus this symbol would not be exported properly by Kendo Drawing if you are using CODE2000 font. To ensure a character is exported you must apply a font that supports it. Apart from CODE2000 used in the example above, there are other fonts that support special characters, for instance ArialUnicodeMS.
Regards,
Ivan Danchev
Progress Telerik
For a special character to be exported a font that supports such character must be applied to the HTML element that contains it. Consider the following example:
<body>
<style>
#curencySymbols {
font-family: "CODE2000";
}
</style>
<script>
kendo.pdf.defineFont({
"CODE2000": "Fonts/CODE2000.TTF"
});
</script>
<script type="text/javascript">
var generatePDF = function () {
kendo.drawing.drawDOM("#curencySymbols", {
paperSize: 'auto',
margin: { left: "1cm", top: "1cm", right: "1cm", bottom: "1cm" }
}).then(function (group) {
kendo.drawing.pdf.saveAs(group, "currency.pdf")
});
};
</script>
<button onclick="generatePDF();">Download</button>
<div id="curencySymbols">
Yen:
<p>¥</p>
Un-supported Indian Rupee sign:
<p>₹</p>
Supported Indian Rupee sign:
<p>₨</p>
<p>₽</p>
<p>元</p>
<p>$</p>
<p>¢</p>
<p>£</p>
<p>€</p>
<p>¥</p>
</div>
</body>
As you can see the CODE2000 font is applied to the exported element #currencySymbols. Within it there are a number of currency symbols, some of them added with their hex code (¥ for example) others with their HTML entities (€ for example). This font supports special characters, however there are certain currencies that it does not support, for example: ₹ Thus this symbol would not be exported properly by Kendo Drawing if you are using CODE2000 font. To ensure a character is exported you must apply a font that supports it. Apart from CODE2000 used in the example above, there are other fonts that support special characters, for instance ArialUnicodeMS.
Regards,
Ivan Danchev
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which
deliver the business app essential building blocks - a grid component,
data visualization (charts) and form elements.