Currently I'm using kendo ui version -> 2022.3.1109
I want to download pdf from html so here's my simple code.
<body>
<div id="pdf-scope">
<p>
Assignment Order - <strong>Interview</strong> - Review & Submit
</p>
<p>
Assignment Order - <span class="bold-text">Interview</span> - Review & Submit
</p>
</div>
<button id="btn-download-pdf">
download
</button>
</body>
</html>
<script>
$("#btn-download-pdf").on("click", () => {
let pdfDom = $("#pdf-scope");
kendo.drawing.drawDOM(pdfDom, {
/*margin: "2px",*/
paperSize: "A4",
scale: 0.4,
margin: 50,
keepTogether: ".prevent-split",
forcePageBreak: ".page-break",
landscape: true,
multiPage: true
}).then(function (group) {
kendo.drawing.pdf.saveAs(group, "Interview.pdf");
});
});
</script>
Everything's fine on html view, here is the view I tried:
Until I clicked the pdf button, a strange result shown in downloaded pdf
The question is why this is happened ? Is it something wrong with my code ?I know the problem is not bold style but the tag inside <p> is being recognized as tab character, fyi I also tried another workaround such putting 2 div in-line and gave me the same result.
Hi,
I tested the behavior using the provided snippet in the Dojo linked here but the issue is not reproduced on my side. Could you please take a look and let me know if I am missing someting?
Regards,
Neli