REMINDER

Please be respectful of all AppDragers! Keep it really civil so that we can make the AppDrag community of builders as embracing, positive and inspiring as possible.

save as pdf



  • Hi! I need a button "Save as pdf" on my site.
    I have used jspdf ( https://github.com/MrRio/jsPDF ) before at another site.
    What is the best way to do it in AppDrag?



  • Hello @Henrik-Riccius,

    You can follow this tutorial here to make a 'Dowload PDF' button.

    I hope I answer your question well.

    Thank you and have a nice day 🙂



  • Hey Henrik,

    If I understand your need correctly, I believe you want to generate the PDF on the client side, so yes you can still use the same library "jsPDF".

    From their documentation I can see you can load it from a CDN, so just drop a block of HTML source code on your page, then paste this in it

    <script src="https://unpkg.com/jspdf@latest/dist/jspdf.umd.min.js"></script>
    
    <script>
        window.jsPDF = window.jspdf.jsPDF;
        const doc = new jsPDF();
        doc.text("Hello world!", 10, 10);
        doc.save("a4.pdf");
    </script>
    

    This code will download a generated PDF containing Hello world! when you load the page 🙂



  • @Joseph-Benguira said in save as pdf:

    derstand your need correctly, I believe you want to generate the PDF on the client side, so yes you can still use the same library "jsPDF".
    From their documentation I can see you can load it from a CDN, so just drop a block of HTML source code on your page, then paste this in it

    Hi,
    Thanks Joseph. Yes, this could work. My question is how I can mark the dynamic section of my page (DS2=list of products) to be my "pdfArea". Can't get it to work. The genereted pdf contains:
    "[DS2=Product_name]
    [DS2=Category]
    [DS2=temp_Company]"

    my test:

    <div id="pdfArea">
         <h3>Produkter</h3>
        ...
        ...
        ...   
    </div>
    
    <div id="editor"></div>
    <button id="cmd">Save list as pdf</button>
    
    <script>
    var doc = new jsPDF();
        var specialElementHandlers = {
            '#editor': function (element, renderer) {
                return true;
            }
        };
        $('#cmd').click(function () {
            doc.fromHTML($('#pdfArea').html(), 15, 15, {
                'width': 170,
                    'elementHandlers': specialElementHandlers
            });
            doc.save('mobelfakta-lista.pdf');
        });
    </script>
    


  • @David-Alimi thanks, but it is not a ready-made pdf. I want to generate a pdf with the content of the webpage.


Log in to reply