Generate a dynamic PDF based on JSON data

Ask the community
, , , ,
2

In case anyone else stumbles on this. You MUST have a premium site plan in order for it to work.

Also, you should use an iFrame and collapse it and post a message to the iFrame to export the code. Here is a basic example of the iFrame code:

<!DOCTYPE html>
<html lang="en">

    <head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js"
            integrity="sha384-NaWTHo/8YCBYJ59830LTz/P4aQZK1sS0SneOgAvhsIl3zBu8r9RevNg5lHCHAuQ/" crossorigin="anonymous">
            </script>
    </head>

    <body onLoad="ready()">

        <script>

            function generatePdf() {

                // Default export is a4 paper, portrait, using millimeters for units
                const doc = new jsPDF();

                doc.text(100, 20, 'title text');
                doc.save("Test.pdf");

                console.log(doc)
            }

            window.onmessage = function (event) {
                if (event.data) {
                    console.log(event.data, 'pdf data')
                    generatePdf(event.data)
                } else {
                    console.log("HTML Code Element received a generic message:");
                    console.log(event.data);
                }
            };

            function ready() {
                window.parent.postMessage({ "type": "ready" }, "*");
            }

        </script>

    </body>

</html>

Lastly check out this post for a more complete, yet different example.

1 Like