How to send several QRCodes to one PDF file

6 posts, 0 answers
  1. Tayger
    Tayger avatar
    182 posts
    Member since:
    Jan 2015

    Posted 06 Dec 2017 Link to this post

    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

     

     

     

  2. Daniel
    Admin
    Daniel avatar
    2211 posts

    Posted 08 Dec 2017 Link to this post

    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.
  3. Tayger
    Tayger avatar
    182 posts
    Member since:
    Jan 2015

    Posted 09 Dec 2017 in reply to Daniel Link to this post

    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

  4. Tayger
    Tayger avatar
    182 posts
    Member since:
    Jan 2015

    Posted 09 Dec 2017 Link to this post

    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>

     

     

  5. Daniel
    Admin
    Daniel avatar
    2211 posts

    Posted 11 Dec 2017 Link to this post

    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.
  6. Tayger
    Tayger avatar
    182 posts
    Member since:
    Jan 2015

    Posted 11 Dec 2017 in reply to Daniel Link to this post

    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!

Back to Top