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.
1 Answer, 1 is accepted
Rank 1
Iron
You might have some CSS rules that are unintentionally targeting the <div> tag inside your <p> and giving it a margin or padding that pushes it to the right, making it look like a tab.
Rank 1
If you are using charts, canvases, or cloned elements, try calling kendo.drawing.drawDOM after kendo.drawing.exportPDF / exportImage with a small delay. Kendo sometimes needs time for the layout to stabilize before rendering.
-------rocket fortress------------
Rank 1
I've encountered this error before when using drawDOM with elements that have transform or flex properties. Try removing the transform, setting a fixed width, and placing page breaks at specific locations; the PDF rendering should be better. See if that improves things for you.
Rank 1
Maybe your CSS is accidentally applied to the div tag in p causing it to shift to the right like an indentation.
Regarding Kendo errors, sometimes the layout is not stable so you need to call drawDOM again after exportPDF or exportImage, adding a little delay will help render more correctly. If using transform or flex, try removing transform, setting a fixed width and adding a page break to make the PDF (Bitlife)display more standard.
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