Generate a dynamic PDF based on JSON data

Ask the community
, , , ,
1

Question:
Looking for ideas on how to export json data into a custom built PDF. I have the jsPDF NPM installed but figure I need to build an iFrame to actually export the file because the page code does not render the save action. Has anyone built a json to pdf export with wix before?

Product:
Wix Studio

What are you trying to achieve:
I am going to build out a dynamic invoice PDF that you can export with JSON data.

What have you already tried:

  1. jsPDF NPM into editor’s page code.
  2. html2pdf NPM
  3. Utilize an iFrame with the same NPM.

Additional information:

  1. The NPM’s return the following (warning) message in Chrome console: “Download is disallowed. The frame initiating or instantiating the download is sandboxed, but the flag ‘allow-downloads’ is not set.”
  2. Yes I am aware of the Generate PDF API but I do not want to pay for their subscription.
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
3

Yes, using …

  1. CUSTOM-ELEMENTS
  2. HTML-COMPONENTS

…fully… —> you will need a PREMIUM-PLAN.