Hello
I'm working with the KendoQRCode Widget that is working fine! I'm also using the exportPDF/SVG/Image functions that all do a great job!
Now I would like to send several created QRCodes (defined in KendoQRCode Widgets) to a single PDF file, so the user can print them all by one PDF file (see attachment). I don't know if that is possible at all so I tried several things. The closest I came to do that:
...
var
qrCode = $(
"#qrcode"
).getKendoQRCode(); // Existing QRCode Widget
var
draw = kendo.drawing;
var
root =
new
draw.Group();
var
code = qrCode.exportSVG({ paperSize:
"A4"
, landscape:
false
}).done(
function
(data) {
root.append(data);
});
draw.exportPDF(root, { paperSize:
"A4"
, landscape:
true
}).done(
function
(data) {
kendo.saveAs({
dataURI: data,
fileName:
"qrcodes.pdf"
});
});
..
The exportImage function does not throw an error but the QRCode is not in the generated PDF file. Using the function exportSVG throws an error: "TypeError: e.transform is not a function. (In 'e.transform()', 'e.transform' is undefined)".
So I wonder how do I send several QRCodes coming from the KendoQRCode Widget(s) into a single PDF file (if possible)? The KendoQRCode Widgets are all displayed in the page and therefore programmatically accessible.
Regards
5 Answers, 1 is accepted
You could export a wrapper element similar to this demo. The other option that I can suggest is to get the export groups of the separate QR codes again with the drawDOM method and export a common parent. You will need to manually position the elements in this case - example.
Regards,
Daniel
Progress Telerik
Excellent, thank you, Daniel! The keyword was 'drawDOM'. In my project I wanted to build all QRCodes in background but, based on documentation, I realised they have to be visible and in a HTML container (DIV) to export them all. It works!
I now struggle with the page size and border. I have set it that way:
kendo.drawing.drawDOM($(
"#dummydiv"
))
.then(
function
(group) {
return
kendo.drawing.exportPDF(group, {
paperSize:
"A4"
,
landscape:
false
,
margin: {left:
"1cm"
, top:
"1cm"
, right:
"1cm"
, bottom:
"1cm"
}
});
})
.done(
function
(data) {
kendo.saveAs({
dataURI: data,
fileName:
'QRCodes_all'
+
'.pdf'
});
});
The weird thing now: Even though I have defined the paper size (A4) and the margins the exported PDF looks 1:1 as they are presented in the #dummydiv: 3 lines of QRCodes, cut off on the right side of the PDF file. See therefore the attachment:
- all_qrcodes.png : Shows all the QRCodes in the dummydiv inside the Browser
- cut_off_in_pdf.png : Shows the right side of the PDF-exported dummydiv (cut off at margin-right)
I would have guessed the kendo.drawing.exportPDF function would consider the page size and margins but it doesn't. To check this out I made the Browser window smaller so that there are 4 QRCodes on each line. Exporting this shows then also 4 QRCodes in the exported PDF file.
It would work if I set a hardcoded dummydiv length to the official A4 length (minus set margins) but then I'm loosing any dynamic (like changing the paperSize or landscape/portrait). So the question is: Should the kendo.drawing.exportPDF function care/consider set pageSize and margin or do I have to do this programmatically?
Furthermore I realised that no second PDF page will be created for the left QRCodes. They are just not showing/displayed in the exported PDF (kinda cut off at the bottom). I assume this is also related to the overall problem.
Regards
I have created a fully working demo showing you the effect the format (A4) and margins will be ignored. Just press the "Export Dom" button to export the QRCodes. There is also a side effect having the QRCode size of 120 with more than 223 chars. I have commented that inside the code:
<!DOCTYPE html>
<html>
<head>
<base href=
"http://demos.telerik.com/kendo-ui/qrcode/index"
>
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel=
"stylesheet"
href=
"https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.common.min.css"
>
<link rel=
"stylesheet"
href=
"https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.default.min.css"
>
<link rel=
"stylesheet"
href=
"https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.default.mobile.min.css"
/>
<script src=
"https://code.jquery.com/jquery-1.12.3.min.js"
></script>
<script src=
"https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.all.min.js"
></script>
<link rel=
"stylesheet"
href=
"https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.rtl.min.css"
>
<link rel=
"stylesheet"
href=
"https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.mobile.all.min.css"
>
</head>
<body>
<button type=
"button"
class=
"k-button"
id=
"exportDom"
>Export Dom</button>
<div id=
"dummydiv"
style=
"position: relative; z-index: -1;"
></div>
<script type=
"text/javascript"
>
$(document).ready(
function
() {
$(
"#exportDom"
).click(
function
() {
var
pdfExport =
''
;
$(
"#dummydiv"
).empty();
for
(
var
i=0; i < 25; ++i) {
pdfExport =
''
;
pdfExport +=
'<div id="qrcodeframe'
+ i +
'" style="position: relative; float: left; text-align: center; font-size: 12px; margin-right: 20px; margin-bottom: 20px;">'
;
pdfExport +=
'<div id="qrcodeexport'
+ i +
'" style="display: table; margin: 0 auto;"></div>'
;
pdfExport +=
'<div style="margin-top: 5px;">QRCode Description '
+ i +
'</div>'
;
pdfExport +=
'</div>'
;
$(
"#dummydiv"
).append(pdfExport);
$(
"#qrcodeexport"
+ i).kendoQRCode({
value:
'Some QRCode text in here '
+ i,
//value: 'If you go over 223 chars for value with size 120 the QRCode gets drammatically smaller for unknown reason. This is also something I do not understand but try it yourself while activating this line as value instead of the existing one.',
size: 120,
border: {
color:
"#000000"
,
width: 3
}
});
}
kendo.drawing.drawDOM($(
"#dummydiv"
))
.then(
function
(group) {
return
kendo.drawing.exportPDF(group, {
paperSize:
"A4"
,
landscape:
false
,
margin: {left:
"1cm"
, top:
"1cm"
, right:
"1cm"
, bottom:
"1cm"
}
});
})
.done(
function
(data) {
kendo.saveAs({
dataURI: data,
fileName:
"QRCodes.pdf"
});
});
});
});
</script>
</body>
</html>
You should pass the paperSize and margin to the drawDOM options in order for the automatic page breaking to work - updated example.
As for the issue with the longer values - the size of the modules is determined so that it is whole pixels so depending on the size of the encoded data, it may not always be possible to fill the entire available space. For longer values, I would suggest to increase the size.
Regards,
Daniel
Progress Telerik
Excellent support, that solved the problem, thank you!
As you said I increased the size and the QRCode was filling the whole space. Works that way as well, perfect!