How to Generate Beautiful PDF Reports in n8n

Description

In this video I show you step-by-step how to generate beautiful, fully custom PDF reports from any data in your n8n automations using AI-built HTML templates and CloudConvert, without needing a subscription service. The example use case is an AI-powered SEO audit that analyzes a website, structures the results as JSON, renders them into a styled HTML report, and then converts that into a polished PDF. 🟩 Learn n8n technical fundamentals in an easy way: https://mikepekka.com/technical-n8n 🟨 Create your n8n account: https://mikepekka.com/n8n * ➡️ PROMPT 1 ----------- # TASK Generate a beautiful, pristine HTML and CSS template in a single HTML file for an SEO audit report. # DESIGN It should be clean, modern, and include colors and rating bars, charts or circles for scores. Use slightly muted colors for an extra modern look. Import IBM Plex Sans from Google fonts to use in this entire report. The main accent color (i.e. for the header card) is: #6E7963. The page background color must be white (#ffffff). # LAYOUT Ensure atomic sections, like info cards, aren’t split by page breaks. Individual sections should not have a max-width or horizontal padding/ margin around them. Remove all margins / padding around the content like this:body { margin: 0; padding: 0; /* Remove body padding/margin so we don't double up with @page margins that the pdf engine will add later */ width: 100%; max-width: none; } DO NOT add print @page margins, DO NOT add any @page rules in the css, my pdf engine will do that later # TECH Use only HTML and CSS with no external dependencies; everything must be in one html file! Use CSS variables for consistency. Use -webkit-print-color-adjust: exact and print-color-adjust: exact to ensure that when printing to PDF colors/Styles are preserved. # DATA STRUCTURE Here is an example for data structure that the template will be rendered with: ➡️ REPLACE WITH EXAMPLE DATA Make sure, that this data structure (with arbitrary information) can be rendered into the report. # PLACEHOLDER / TEMPLATE SYNTAX Use [path.to.field] for placeholders and HTML comments to indicate loops, conditional elements & conditional styles. Do not use any templating library syntax. ➡️ PROMPT 2 --------------- I have the following HTML report template. Your job now is to turn this into single JavaScript function called "renderTemplate" which renders this template with report data that it receives as a parameter. Use Javascript features like map, filter, conditional expressions, etc. to render loops of multiple items, conditionally change colors / badges etc. The javascript function should NOT have any dependencies or use external libraries. I want zero dependencies, just plain vanilla javascript. Also, no module.exports at the end. Just the function. For every value that you render into the template, run it through an escapeHtml function first The 1 parameter that this function receives is the report object, which for example could look like this: #n8n #n8ntutorial #ai 00:00 Intro 00:43 Prepare report data 04:29 Generate HTML template 09:10 Create render function 12:01 Render PDF file 16:28 Test with new data * The description of this video contains affiliate links (marked with *), which means that if you sign up for one of the tools that I recommend and decide to switch to the paid plan, I’ll receive a small commission without any additional cost for you. This helps support the channel and allows me to continue making videos like this. Thank you for your support!