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

Invalid PDF created when using Material Design Icon

7 Answers 272 Views

General Discussions

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

Brandon asked on 07 Apr 2021, 05:44 PM

Hi,

I have a problem when exporting a pdf where the element being exported contained a Material Design Icon. The PDF is invalid and does not display correctly in Adobe Reader.

I check the validity here https://www.pdf-online.com/osa/validate.aspx

The PDF does render correctly in Chrome PDF viewer though.

Any suggestions as to why?

<html>
<head>
<meta charset="utf-8" />
<title>Getting Started with Kendo UI for jQuery</title>

<link href="https://kendo.cdn.telerik.com/2021.1.330/styles/kendo.common.min.css" rel="stylesheet" />
<link href="https://kendo.cdn.telerik.com/2021.1.330/styles/kendo.default.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@5.9.55/css/materialdesignicons.min.css" />
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2021.1.330/js/kendo.all.min.js"></script>
</head>
<body>

<p>Hello <a href="https://docs.telerik.com/kendo-ui/intro/first-steps">Kendo UI for jQuery</a>!
This is version <strong id="kendoVersion"></strong>.</p>

<script>

$(function() {

$("#kendoVersion").text(kendo.version);

});

</script>

<script>
kendo.pdf.defineFont({
"Material Design Icons": "https://cdn.jsdelivr.net/npm/@mdi/font@5.9.55/fonts/materialdesignicons-webfont.ttf"
});
</script>
<script type="text/javascript">
var generatePDF = function () {
kendo.drawing.drawDOM("#PdfPrintTest", {
paperSize: 'auto',
margin: { left: "1cm", top: "1cm", right: "1cm", bottom: "1cm" }
}).then(function (group) {
kendo.drawing.pdf.saveAs(group, "test.pdf")
});
};
</script>
<button onclick="generatePDF();">Download</button>
<div id="PdfPrintTest">
Bob lives in a <span class="mdi mdi-grass"></span>. and he likes it a lot
</div>

</body>
</html>

7 Answers, 1 is accepted

answered on 08 Apr 2021, 08:24 PM

adobe-acrobat-reader-error.png

pdf-in-chrome.png

pdf-invalid.png

test15ff3f10cf8943e088de1908c32e017b.zip

Another Dojo here https://dojo.telerik.com/EhowehEQ

In this example you get an error when opening the PDF in adobe, but it works fine in another PDF reader

Again, https://www.pdf-online.com/osa/validate.aspx claims it's invalid.

I have attached the pdf in a zip file

answered on 15 Apr 2021, 01:58 PM

Hi Brandon,

Thank you very much for your patience.

Based on your report I logged a bug report on your behalf in our official Feedback Portal. Below you will find a link to the issue.

- https://feedback.telerik.com/kendo-jquery-ui/1515601-invalid-pdf-is-created-when-exporting-with-drawing-and-material-design-icons

Currently, I could not suggest a workaround to the issue. If we find one we will update the item in the Feedback Portal.

As a small token of gratitude for reporting a bug, I have increased your Telerik points.

Regards,
Neli
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.