save as pdf

Henrik Riccius

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?

David Alimi

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

Joseph Benguira

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

Henrik Riccius

@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>

Henrik Riccius

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

Henrik Riccius

@Joseph-Benguira , can I have dynamic (DS) content in the pdf? How? Please see my code-example in this thred. Regards Henrik

REMINDER

save as pdf