https://html2pdf.app/component---src-templates-post-jsx-content-fi…oice-with-n-8-n-mdx-a43d6f150afe2fcb1423.js

1"use strict";(self.webpackChunkhtml2pdf_site=self.webpackChunkhtml2pdf_site||[]).push([[562],{7398:function(e,t,n){n.r(t),n.d(t,{Head:function(){return g},default:function(){return h}});var l=n(8453),a=n(6540),r=n(7148),c=n(4810);function i(e){const t=Object.assign({h2:"h2",p:"p",ul:"ul",li:"li",h3:"h3"},(0,l.RP)(),e.components);return a.createElement(a.Fragment,null,a.createElement("span",{id:"introduction",style:{position:"relative",top:-100}}),"\n",a.createElement(t.h2,null,"Introduction"),"\n",a.createElement("p",null,a.createElement("img",{src:"/img/blog-generate-and-send-pdf-invoice-with-n8n.png",alt:"Generate and Send PDF Invoice with n8n"})),"\n",a.createElement(t.p,null,"Automation platforms like n8n are becoming increasingly popular for building internal tools, AI workflows, and business automations without writing full backend applications."),"\n",a.createElement(t.p,null,"In this tutorial, we will build a complete automated workflow that:"),"\n",a.createElement(t.ul,null,"\n",a.createElement(t.li,null,"collects invoice data from a form"),"\n",a.createElement(t.li,null,"generates an HTML invoice template"),"\n",a.createElement(t.li,null,"converts HTML to PDF using HTML2PDF.app"),"\n",a.createElement(t.li,null,"sends the generated PDF invoice by email"),"\n"),"\n",a.createElement(t.p,null,"The final workflow will look like this:"),"\n",a.createElement(r.A,{className:"shell"},"Form Trigger\n   ↓\nGenerate HTML Template\n   ↓\nConvert HTML to PDF\n   ↓\nSend Email with PDF Attachment"),"\n",a.createElement(t.p,null,"At the end of this article, you will also be able to download and import the complete ",a.createElement(c.N_,{to:"/blog/generate-and-send-pdf-invoice-with-n8n/#workflow-template"},"n8n workflow template"),"."),"\n",a.createElement(t.h3,null,"What We Will Build"),"\n",a.createElement(t.p,null,"In this example:"),"\n",a.createElement(t.ul,null,"\n",a.createElement(t.li,null,"User opens a form"),"\n",a.createElement(t.li,null,"User enters:","\n",a.createElement(t.ul,null,"\n",a.createElement(t.li,null,"customer name"),"\n",a.createElement(t.li,null,"email address"),"\n",a.createElement(t.li,null,"invoice number"),"\n",a.createElement(t.li,null,"amount"),"\n"),"\n"),"\n",a.createElement(t.li,null,"n8n generates invoice HTML dynamically"),"\n",a.createElement(t.li,null,"HTML is converted to PDF using HTML2PDF.app API"),"\n",a.createElement(t.li,null,"PDF is sent automatically by email"),"\n"),"\n",a.createElement("span",{id:"step-1-create-form-trigger",style:{position:"relative",top:-100}}),"\n",a.createElement(t.h2,null,"Step 1 — Create Form Trigger"),"\n",a.createElement(t.p,null,'Create a new workflow in n8n and add "Form Trigger" node.'),"\n",a.createElement(t.p,null,"This node creates a public form where users can submit invoice data."),"\n",a.createElement(t.p,null,"Add fields:"),"\n",a.createElement("table",{className:"table"}

1,a.createElement("thead",null,a.createElement("th",null,"Field"),a.createElement("th",null,"Type")),a.createElement("tbody",null,a.createElement("tr",null,a.createElement("td",null,"customerName"),a.createElement("td",null,"Text")),a.createElement("tr",null,a.createElement("td",null,"email"),a.createElement("td",null,"Email")),a.createElement("tr",null,a.createElement("td",null,"invoiceNumber"),a.createElement("td",null,"Text")),a.createElement("tr",null,a.createElement("td",null,"total"),a.createElement("td",null,"Text")))),"\n",a.createElement("span",{id:"step-2-generate-html-invoice-template",style:{position:"relative",top:-100}}),"\n",a.createElement(t.h2,null,"Step 2 — Generate HTML Invoice Template"),"\n",a.createElement(t.p,null,'Add a "code" node.'),"\n",a.createElement(t.p,null,"This node will dynamically generate invoice HTML."),"\n",a.createElement(r.A,{className:"javascript"},'const clientName = $json.clientName;\nconst clientEmail = $json.clientEmail;\nconst invoiceNumber = $json.invoiceNumber;\nconst total = $json.total;\n\nconst html = `\n\n<!DOCTYPE html>\n\n<html>\n<head>\n  <meta charset="UTF-8">\n  <style>\n    body {\n      font-family: Arial, sans-serif;\n      padding: 40px;\n      color: #333;\n    }\n\n    .invoice {\n      max-width: 700px;\n      margin: 0 auto;\n      border: 1px solid #ddd;\n      padding: 30px;\n    }\n\n    h1 {\n      color: #222;\n    }\n\n    .total {\n      margin-top: 30px;\n      font-size: 24px;\n      font-weight: bold;\n    }\n\n  </style>\n</head>\n<body>\n  <div class="invoice">\n    <h1>Invoice</h1>\n\n    <p><strong>Invoice Number:</strong> ${invoiceNumber}</p>\n\n    <p><strong>Customer:</strong> ${clientName}</p>\n\n    <div class="total">\n      Total: €${total}\n    </div>\n\n  </div>\n</body>\n</html>`;\n\nreturn {\njson: {\nhtml,\nrecipient: clientEmail,\nname: clientName\n}\n};'),"\n",a.createElement("span",{id:"step-3-convert-html-to-pdf",style:{position:"relative",top:-100}}),"\n",a.createElement(t.h2,null,"Step 3 — Convert HTML to PDF"),"\n",a.createElement(t.p,null,'Now add an "HTTP Request" node.'),"\n",a.createElement(t.p,null,"Configuration:"),"\n",a.createElement("table",{className:"table"}

1,a.createElement("thead",null,a.createElement("th",null,"Setting"),a.createElement("th",null,"Value")),a.createElement("tbody",null,a.createElement("tr",null,a.createElement("td",null,"Method"),a.createElement("td",null,"POST")),a.createElement("tr",null,a.createElement("td",null,"Authentication"),a.createElement("td",null,"Generic Credential Type")),a.createElement("tr",null,a.createElement("td",null,"Generic Auth Type"),a.createElement("td",null,"Header Auth")),a.createElement("tr",null,a.createElement("td",null,"Header Auth"),a.createElement("td",null,a.createElement(t.p,null,"Name: ",a.createElement("code",null,"x-api-key"),", Value: ",a.createElement("code",null,"your-api-key-***")))),a.createElement("tr",null,a.createElement("td",null,"URL"),a.createElement("td",null,a.createElement("code",null,"https://api.html2pdf.app/v1/generate"))),a.createElement("tr",null,a.createElement("td",null,"Send Body"),a.createElement("td",null,"On")),a.createElement("tr",null,a.createElement("td",null,"Specify Body"),a.createElement("td",null,"Using Fields Below")),a.createElement("tr",null,a.createElement("td",null,"Body Parameters"),a.createElement("td",null,a.createElement(t.p,null,"html: ",a.createElement("code",null,"{{$json.html}}")))),a.createElement("tr",null,a.createElement("td",null,"Response Format"),a.createElement("td",null,"File")),a.createElement("tr",null,a.createElement("td",null,"Put Output in Field"),a.createElement("td",null,a.createElement("code",null,"data"))))),"\n",a.createElement(t.p,null,'By setting "Header Auth" click edit on "Header Auth account" and set values accordingly to the image below. You will need an HTML2PDF.app API key — you can register and get a free API key here:'),"\n",a.createElement("p",null,a.createElement("a",{className:"btn btn-light",target:"_blank",rel:"noopener noreferrer",href:"https://dash.html2pdf.app/registration"},a.createElement(t.p,null,"Get Free API Key"))),"\n",a.createElement("p",null,a.createElement("img",{src:"/img/blog-header-auth-account.png",alt:"header auth account setup on n8n"})),"\n",a.createElement(t.p,null,"We recommend storing your HTML2PDF.app API key securely using the Credentials system instead of hardcoding it into the workflow."),"\n",a.createElement("span",{id:"step-4-send-pdf-by-email",style:{position:"relative",top:-100}}),"\n",a.createElement(t.h2,null,"Step 4 — Send PDF by Email"),"\n",a.createElement(t.p,null,'Add a "Send Email" node.'),"\n",a.createElement(t.p,null,"In this tutorial we use SMTP credentials with ",a.createElement("a",{href:"https://www.mailgun.com/"},"Mailgun"),"."),"\n",a.createElement(t.p,null,"Configuration example:"),"\n",a.createElement("table",{className:"table"}

1,a.createElement("thead",null,a.createElement("th",null,"Field"),a.createElement("th",null,"Value")),a.createElement("tbody",null,a.createElement("tr",null,a.createElement("td",null,"From Email"),a.createElement("td",null,"enter your email address")),a.createElement("tr",null,a.createElement("td",null,"To Email"),a.createElement("td",null,a.createElement("code",null,"{{ $json.recipient }}"))),a.createElement("tr",null,a.createElement("td",null,"Subject"),a.createElement("td",null,"Your Invoice")),a.createElement("tr",null,a.createElement("td",null,"Email Format"),a.createElement("td",null,"HTML")),a.createElement("tr",null,a.createElement("td",null,"Attachments"),a.createElement("td",null,a.createElement("code",null,"data"))))),"\n",a.createElement(t.p,null,"Example of HTML email message:"),"\n",a.createElement(r.A,{className:"javascript"},"Hello {{ $json.name }},\n\n<br><br>\n\nPlease find your invoice attached.\n\n<br><br>\n\nThank you.\n"),"\n",a.createElement("span",{id:"testing-the-workflow",style:{position:"relative",top:-100}}),"\n",a.createElement(t.h2,null,"Testing the Workflow"),"\n",a.createElement(t.p,null,"When you finish all these steps, the result of your workflow should be similar to this (nodes can have custom names for clarity):"),"\n",a.createElement("p",null,a.createElement("img",{src:"/img/blog-n8n-workflow-1.png",alt:"n8n workflow template"})),"\n",a.createElement(t.p,null,"After activating the workflow:"),"\n",a.createElement(t.ul,null,"\n",a.createElement(t.li,null,"Open the generated form URL"),"\n",a.createElement(t.li,null,"Enter invoice details"),"\n",a.createElement(t.li,null,"Submit form"),"\n",a.createElement(t.li,null,"Receive PDF invoice by email automatically"),"\n"),"\n",a.createElement("span",{id:"conclusion",style:{position:"relative",top:-100}}),"\n",a.createElement(t.h2,null,"Conclusion"),"\n",a.createElement(t.p,null,"Combining n8n with HTML2PDF.app allows you to build powerful document automation workflows in minutes."),"\n",a.createElement(t.p,null,"Instead of manually generating invoices, reports, or PDFs, you can fully automate the entire process:"),"\n",a.createElement(t.ul,null,"\n",a.createElement(t.li,null,"collect data"),"\n",a.createElement(t.li,null,"generate HTML"),"\n",a.createElement(t.li,null,"convert to PDF"),"\n",a.createElement(t.li,null,"deliver automatically"),"\n"),"\n",a.createElement(t.p,null,"without building a custom backend service."),"\n",a.createElement("span",{id:"workflow-template",style:{position:"relative",top:-100}}),"\n",a.createElement(t.h2,null,"Workflow Template"),"\n",a.createElement(t.p,null,"Download the ready-to-use n8n workflow template and import it directly into your n8n instance. After importing, configure your own HTML2PDF.app API credentials and email provider credentials."),"\n",a.createElement("a",{className:"btn btn-secondary",target:"_blank",rel:"noopener noreferrer",href:"/downloads/n8n-generate-send-pdf-invoice-v1.json"},a.createElement(t.p,null,"Download Template")))}var o=function(e){void 0===e&&(e={});const t=Object.assign({},(0,l.RP)(),e.components).wrapper;return t?a.createElement(t,e,a.createElement(i,e)):i(e)},m=n(3895),u=n(7528),s=n(1970),d=n(6188);const E={Link:c.N_};function p(e){let t=e.data.mdx.frontmatter,n=t.title,r=t.slug,i=t.navigation,o=t.date,u=t.readTime,p=e.children;return a.createElement(m.A,null,a.createElement("section",{className:"page__area"},a.createElement("div",{className:"container"},a.createElement("div",{className:"row g-4"},a.createElement("div",{className:"col-xxl-2 col-xl-3 col-lg-6 left__sidebar__sticky"},a.createElement("div",{className:"left__sidebar"},a.createElement("ul",{id:"nav"},i.map(e=>a.createElement("li",{key:"nav-item-"+e[0]},a.createElement(c.N_,{to:"/blog/"+r+"#"+e[0]},e[1])))))),a.createElement("div",{className:"col-xxl-8 col-xl-9 col-lg-12"},a.createElement("div",{className:"page__title"},a.createElement("h1",null,n)),a.createElement("div",{className:"custom__blk__1 page__content"},a.createElement("div",{className:"blog__post__extra mb-15"},o,a.createElement("span",{className:"pl-25"}),a.createElement(s.gc,{icon:d.pS3})," ",u+" min read"),a.createElement(l.xA,{components:E},p)))))))}function h(e){return a.createElement(p,e,a.createElement(o,e))}const g=e=>{let t=e.data.mdx.frontmatter,n=t.title,l=t.description,r=t.slug,c=t.thumbnail;return a.createElement(u.A,{title:n,description:l,canonicalUrl:"/blog/"+r+"/",image:c})}}

1,3895:function(e,t,n){var l=n(6540),a=n(6474),r=n(6836);t.A=e=>{let t=e.children;return l.createElement("div",{className:"site__page"},l.createElement("div",{className:"inner__page container"},l.createElement(r.A,null),t),l.createElement(a.A,null))}},8453:function(e,t,n){n.d(t,{RP:function(){return r},xA:function(){return i}});var l=n(6540);const a=l.createContext({});function r(e){const t=l.useContext(a);return l.useMemo(()=>"function"==typeof e?e(t):{...t,...e},[t,e])}const c={};function i({components:e,children:t,disableParentContext:n}){let i;return i=n?"function"==typeof e?e({}):e||c:r(e),l.createElement(a.Provider,{value:i},t)}}}]);
2//# sourceMappingURL=component---src-templates-post-jsx-content-file-path-src-content-posts-generate-and-send-pdf-invoice-with-n-8-n-mdx-a43d6f150afe2fcb1423.js.map