|

WeWeb PDF Generator : Detailed Guide Custom PDF Documents with Xano and PDFMonkey

Although WeWeb does not yet have a PDF generation feature, there is significant demand within the WeWeb community for this functionality.

After testing various available PDF creation platforms, I found that PDFMonkey offers the best balance of price, performance, and ease of integration with backend tools like Xano.

Notably, PDFMonkey allows you to generate up to 300 documents per month for free, making it an excellent choice for developers looking for a cost-effective solution.

Consequently, I have decided to create a comprehensive step-by-step guide to generating custom PDFs using weweb, Xano and PDFMonkey.

Overview of the Method:

We will begin by designing a PDF template, then continue by sending dynamic data from WeWeb data inputs to this template.

We will handle API requests through Xano, display the generated PDF document on our WeWeb page, and allow users to download it.

What is PDFMonkey?

PDFMonkey is an online platform designed to automate the generation of PDF documents. It simplifies the creation of PDFs by allowing users to manage templates and insert dynamic data effortlessly through a REST API.

PDFMonkey offers a free plan that includes the generation of 300 documents per month, with additional premium options available for users requiring more extensive features and higher document production capacities.

Custom PDF Documents with weweb, Xano and PDFMonkey:

First visit pdfmonkey.io and create a new account.

Designing a PDF template in PDFMonkey usually requires HTML and CSS skills. However, thanks to advancements in AI, you no longer need deep coding knowledge to create high-quality PDF templates.

AI tools like ChatGPT can generate the necessary code, simplifying the design process and making it accessible to those without a technical background.

Let’s create a simple INVOICE template by providing the following prompt to ChatGPT.

Prompt: “Create a simple, responsive HTML and CSS invoice template. Include a header with the company name and contact info, a section for client details, a table for itemized charges, and a summary area for totals and taxes. Style with CSS for readability and professional appearance.”

Then from your pdfmonkey dashboard, create a new template:

Next, copy the HTML and CSS provided by ChatGPT and paste it into the PDFMonkey template editor, then click ‘Save’.

HTML code :

CSS Code :

Making the Information Dynamic:

To make the invoice information dynamic, structure your information as JSON data. For this invoice example, the JSON structure should look like this:

To use dynamic data in PDFMonkey templates:

1. Define JSON Data: In the Test Data tab of the Template editor, define your JSON structure, which includes all the data points your document will need, like order ID or client names.

2. Use Liquid Syntax in Template: Insert placeholders in your HTML template using Liquid syntax. For example, use `{{orderId}}` to display the order ID.

3. Access Nested Data: For nested data, use dot notation, e.g., `{{client.fullName}}` to access the client’s full name from within a nested ‘client’ object.

Check the documentation page to learn more about dynamic data in pdfmonkey.

4. Array data: To handle data in an array within PDFMonkey templates using Liquid syntax, you can iterate over each item in the array.

For example, if your JSON data contains an array of line items, you can display each one using a loop structure like this:

This code snippet will loop through each `item` in the `lineItems` array and display the product name, quantity, and price for each line item in your document.

Check the documentation page to learn more about dealing with lists data.

For our invoice example the insertion of the data will be like this :

Congrats you’ve successfully created your first custom PDF template without knowing how to code, thanks to ChatGpt.

The next step is to create PDF documents based on this template. To accomplish this, we will harness the capabilities of the PDFMonkey REST API and Xano as a no-code backend.

First, you need to obtain your PDFMonkey API Secret Key. To do so, navigate to the ‘My Account‘ page on PDFMonkey’s website and click ‘Show my API key’.

To create a document, we will follow the documentation provided by PDFMonkey:

Endpoint: POST https://api.pdfmonkey.io/api/v1/documents

For our INVOICE example the the structure of the api request is:

You can find the document_template_id one the top left of the pdfmonkey document template editing page : 

Setup Xano APIs Endpoints :

1. Create PDF Document endpoint

First reate 3 inputs:

FileName: text type

Data: JSON type

DocumentID: text type

Then pass the following object within the parameters:

Next, fill the header with the following information:

Remember to replace your PDFMonkey API_KEY in the header of the endpoint and assign each value from the Xano inputs.

Eeasy Alternative way : you can easily create the external API by importing the following cURL:

Let’s test this endpoint to generate a new pdf document :

Important note: To automatically generate the PDF, you need to set the “status” value to “pending” in the API parameters.

After sending the create document request, you can check the list of documents from your PDFMonkey dashboard and click to download the document.

Congratulations! You’ve created and downloaded your first custom PDF successfully. But what if we want to send the dynamic data from a web interface and get the download URL of the document instead of downloading it from the PDFMonkey dashboard?

To achieve that, you can use any frontend to send requests to the Xano backend APIs. In this tutorial, I will use WeWeb, which I consider the best no-code frontend tool in the market.

2. Get document Xano API Andpoint

To get the document download URL, we need to add another endpoint: Get PDF endpoint.

In PDFMonkey, each PDF document is identified by a document ID, which you can get from the create document API request output or from the PDFMonkey dashboard.

Create a text type input , name it: id

Then we need to include the id value in the endpoint URL by using Xano’s “sprintf”.

Use this url : “https://api.pdfmonkey.io/api/v1/documents/%s” , then add input id through Xano “sprintf” : 

Create an invoice page in WeWeb with a submit button and all the necessary fields, assign invoice data from your data source, for example, you can store the data of your invoice in a data variable.

Create a second page to view the PDF, add a PDF viewer element and a download button.

  1. First, create a new workflow on the generate invoice button click.
  2. Add a request action, select the create document Xano endpoint, and fill the required inputs, passing the variable invoice data object as the data input, add the PDFMonkey template ID, and give a name to the PDF document.

Before proceeding to the second action, click the test action to send a request.

Create a new object variable to store document data, you can name it documentData.

Add SECOND action to assign the variable with the Document object from the  output of the previous request 

Add another action to navigate to the preview document page.

Then exit the workflow and click on generate document, then assign the preview URL to the WeWeb PDF viewer element from the documentData variable.

Then click the download button and add a get document request, assign the ID from the documentData variable.

Add a download file from URL action and assign the downloadURL output of the previous action, giving the file a name from the invoice data variable.

Advanced Custom PDF Templates:

Prompt engineering involves carefully crafting inputs for AI tools to yield the best possible outcomes. By using the right prompt, you can generate advanced custom PDF templates that meet specific requirements.

For example, if you need a detailed project report template, you might use the following prompt for ChatGPT:

Generate a sophisticated HTML and CSS template for a project report. The template should include a title page with project name and logo, a table of contents, sections for the project overview, milestones, budget breakdown, and team profiles. Style the template to be visually appealing with a consistent color scheme that reflects the company’s branding. Use CSS for layout, fonts, and design elements to ensure the report is professional.

This approach allows you to create highly customized PDF templates using AI, streamlining the design process significantly.

Conclusion

In conclusion, despite WeWeb’s lack of native PDF functionality, integrating PDFMonkey offers a viable solution to meet community needs.

With PDFMonkey’s balanced pricing, performance, and seamless integration with Xano, developers can effectively implement PDF generation in their projects.

This guide provides a clear roadmap—from designing templates in PDFMonkey using AI assistance like ChatGPT, to handling dynamic data and generating downloadable documents enabling even non-coders to efficiently incorporate custom PDFs into their applications.

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *