Telerik Forums / Kendo UI for jQuery
This is a migrated thread and some comments may be shown as answers.

How to send several QRCodes to one PDF file

5 Answers 564 Views
QRCode
This is a migrated thread and some comments may be shown as answers.
Tayger
Top achievements
Rank 1
Iron
Tayger asked on 06 Dec 2017, 01:38 PM
qrcode.jpg

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

Sort by
0
Daniel
Telerik team
answered on 08 Dec 2017, 09:36 AM
Hello,

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
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.
0
Tayger
Top achievements
Rank 1
Iron
answered on 09 Dec 2017, 01:20 PM
all_qrcodes.png
cut_off_in_pdf.png

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

0
Tayger
Top achievements
Rank 1
Iron
answered on 09 Dec 2017, 08:39 PM

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>
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
 
    <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
 
</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>

 

 

0
Daniel
Telerik team
answered on 11 Dec 2017, 10:34 AM
Hi again,

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
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.
0
Tayger
Top achievements
Rank 1
Iron
answered on 12 Dec 2017, 12:49 AM

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!

Tags
QRCode
Asked by
Tayger
Top achievements
Rank 1
Iron
Answers by
Daniel
Telerik team
Tayger
Top achievements
Rank 1
Iron
Share this question
or