HTML-till-PDF låter enkelt tills du gör det om och om igen. En “snabb export” blir snabbt omformatering, trasiga sidbrytningar och en rörig hög med filer som ingen litar på.
Marketing ops-team märker det när landningssidor behöver korrekturkopior. Client services får det på sitt bord när “kan du skicka en PDF?” blir en daglig fråga. Och om du driver ett småföretag är den här HTML-till-PDF-automationen skillnaden mellan strukturerad dokumentation och konstant panik i sista minuten.
Det här flödet konverterar din HTML till en konsekvent PDF via ConvertAPI och arkiverar den där teamet faktiskt hittar den. Du får se hur det fungerar, vad du behöver och praktiska sätt som andra brukar anpassa det på.
Så fungerar den här automationen
Hela n8n-flödet, från trigger till slutlig output:
n8n Workflow Template: ConvertAPI + Google Drive: HTML till PDF, arkiverat snabbt
flowchart LR
subgraph sg0["When clicking ‘Test workflow’ Flow"]
direction LR
n0@{ icon: "mdi:play-circle", form: "rounded", label: "When clicking ‘Test workflow’", pos: "b", h: 48 }
n1@{ icon: "mdi:cog", form: "rounded", label: "Write Result File to Disk", pos: "b", h: 48 }
n2@{ icon: "mdi:swap-vertical", form: "rounded", label: "Create HTML", pos: "b", h: 48 }
n3["<div style='background:#f5f5f5;padding:10px;border-radius:8px;display:inline-block;border:1px solid #e0e0e0'><img src='https://flowpast.com/wp-content/uploads/n8n-workflow-icons/code.svg' width='40' height='40' /></div><br/>Convert HTML to File"]
n4["<div style='background:#f5f5f5;padding:10px;border-radius:8px;display:inline-block;border:1px solid #e0e0e0'><img src='https://flowpast.com/wp-content/uploads/n8n-workflow-icons/httprequest.dark.svg' width='40' height='40' /></div><br/>Convert File to PDF"]
n2 --> n3
n4 --> n1
n3 --> n4
n0 --> n2
end
%% Styling
classDef trigger fill:#e8f5e9,stroke:#388e3c,stroke-width:2px
classDef ai fill:#e3f2fd,stroke:#1976d2,stroke-width:2px
classDef aiModel fill:#e8eaf6,stroke:#3f51b5,stroke-width:2px
classDef decision fill:#fff8e1,stroke:#f9a825,stroke-width:2px
classDef database fill:#fce4ec,stroke:#c2185b,stroke-width:2px
classDef api fill:#fff3e0,stroke:#e65100,stroke-width:2px
classDef code fill:#f3e5f5,stroke:#7b1fa2,stroke-width:2px
classDef disabled stroke-dasharray: 5 5,opacity: 0.5
class n0 trigger
class n4 api
class n3 code
classDef customIcon fill:none,stroke:none
class n3,n4 customIcon
Problemet: HTML-till-PDF är där “snabbt” går för att dö
Att konvertera HTML till PDF är en sån uppgift som ser ut som en enkel bockruta men beter sig som ett projekt. Du exporterar från en webbläsare, sidhuvudet lägger sig ovanpå innehållet, typsnitt flyttar på sig och “final” blir “final_v7_verkligen_final.pdf”. Sedan ber någon om samma dokument igen nästa vecka, fast med en liten ändring, och du gör om hela rutinen. Än värre: PDF:en du skickar är ofta inte en PDF du kan återskapa senare, vilket gör revisioner, kundgodkännanden och interna sign-offs mycket mer stressiga än de behöver vara.
Friktionen byggs på. Här är var det brukar fallera i riktiga team.
- Du tappar ungefär 20 minuter per dokument på att leta rätt på rätt HTML-källa och exportera den “på samma sätt som förra gången”.
- Manuella exporter blir inkonsekventa, så PDF-layouten varierar beroende på vem som körde den och vilken dator de använde.
- Filnamn och arkivering är sällan standardiserade, vilket gör att folk slösar tid på att fråga: “Var lade du den?”
- Småfel smyger sig in (fel version, fel datum, fel sidfot), och de misstagen är pinsamma när en kund upptäcker dem.
Lösningen: konvertera HTML till PDF automatiskt och arkivera den
Det här n8n-flödet tar HTML-innehåll, paketerar det till en fil, skickar den till ConvertAPI för att skapa en PDF och sparar sedan den färdiga PDF:en så att den är redo att dela. Det startar med en manuell trigger (perfekt för test och enkel att byta senare), skapar sedan HTML-payloaden du vill konvertera. Därefter bygger det en binär HTML-fil så att konverteringstjänsten får en “riktig” fil, inte bara text som klistras in i ett formulär. ConvertAPI returnerar en PDF och flödet skriver PDF:en till disk så att du får en pålitlig output som du kan spara, arkivera och distribuera. Med en liten justering kan samma PDF läggas i en specifik Google Drive-mapp så att teamet alltid vet var senaste versionen finns.
Flödet börjar när du kör det i n8n. Din HTML genereras och görs om till en binär fil, sedan gör ConvertAPI HTML-till-PDF-konverteringen. Till sist sparas PDF:en, redo att arkiveras i Google Drive och skickas vidare utan att du behöver dubbelkolla allt.
Det du får: automation vs. resultat
| Det här flödet automatiserar | Resultat du får |
|---|---|
|
|
Exempel: så här ser det ut
Säg att teamet behöver 10 HTML-baserade PDF:er varje vecka för kundkorrektur, interna sign-offs eller compliance-skärmdumpar. Manuellt är det lätt att bränna 15 minuter per PDF på export, layoutkontroll och arkivering, vilket blir cirka 2,5 timmar i veckan. Med det här flödet kör du triggern, låter ConvertAPI skapa PDF:en och filen sparas automatiskt. I praktiken lägger du kanske 2 minuter på att starta och namnge jobbet, och sedan går du vidare.
Det du behöver
- n8n-instans (prova n8n Cloud gratis)
- Self-hosting-alternativ om du föredrar det (Hostinger fungerar bra)
- ConvertAPI för konvertering från HTML till PDF.
- Google Drive för att lagra och dela färdiga PDF:er.
- ConvertAPI API-token (hämta den i ConvertAPI:s användarpanel → Authentication).
Kunskapsnivå: Medel. Du klistrar in en API-token, justerar en HTTP-request och kan valfritt ändra var filer sparas.
Vill du inte sätta upp det här själv? Prata med en automationsexpert (gratis 15-minuters konsultation).
Så fungerar det
Du startar körningen manuellt. Nuvarande trigger är Manual Start, vilket är perfekt när du testar output-kvalitet och namngivningsstandard. Senare kan du byta till en schematrigger eller en “ny fil i Drive”-trigger om du vill ha det helt hands-off.
Flödet genererar din HTML. En Set-node skapar HTML-innehållet så att du inte kopierar från en webbläsare eller förlitar dig på någons sparade mall. Det är också det bästa stället att standardisera sidhuvuden, sidfötter och variabler som datum eller kundnamn.
Den HTML:en blir en riktig fil. Flödet bygger en binär HTML-fil innan den skickas till ConvertAPI. Det här lilla steget spelar roll eftersom filbaserad konvertering oftast är mer förutsägbar än “klistra in HTML i ett formulär och hoppas”.
ConvertAPI skapar PDF:en och sedan lagras den. n8n skickar en HTTP-request till ConvertAPI:s endpoint, tar emot PDF-resultatet och skriver det till disk. Om du föredrar arkivering i Google Drive (det gör de flesta team) kan du styra outputen till en Drive-mappstruktur som matchar dina kunder eller projekt.
Du kan enkelt ändra HTML-mallen så att den matchar ditt varumärke och byta lagringsplats till Google Drive utifrån dina behov. Se hela implementationsguiden nedan för anpassningsalternativ.
Steg-för-steg-guide för implementering
Steg 1: konfigurera den manuella starttriggern
Starta arbetsflödet med en manuell trigger så att ni kan testa HTML-till-PDF-konverteringen vid behov.
- Lägg till noden Manual Start Trigger som din trigger.
- Anslut Manual Start Trigger till Generate HTML Content.
- (Valfritt) Behåll Flowpast Branding som en referens-anteckning; den påverkar inte körningen.
Steg 2: anslut HTML-källinnehåll
Definiera HTML-dokumentet som ska konverteras till en PDF.
- Öppna Generate HTML Content.
- Lägg till en ny tilldelning med Name inställt på
dataoch Type inställt påstring. - Ställ in Value till HTML-mallen i noden, med start på
</code> och slut på.
Steg 3: konfigurera Build HTML Binary
Konvertera HTML-strängen till binärdata så att den kan laddas upp som en fil i API-anropet.
- Öppna Build HTML Binary.
- Klistra in JavaScript Code exakt som visat, inklusive referensen till
$node["Generate HTML Content"].json["data"]. - Bekräfta att skriptet sätter
fileName: 'file.html'och skriver tillitems[0].binary. - Anslut Generate HTML Content till Build HTML Binary.
Steg 4: konfigurera HTML to PDF Request och spara PDF till disk
Skicka HTML-filen till ConvertAPI och spara den resulterande PDF:en till disk.
- Öppna HTML to PDF Request och ställ in URL på
https://v2.convertapi.com/convert/html/to/pdf. - Ställ in Method på
POST, Content Type påmultipart-form-data, och aktivera Send Body och Send Headers. - Under Body Parameters, lägg till en parameter med Name
file, Parameter TypeformBinaryData, och Input Data Field Namedata. - Under Header Parameters, ställ in Accept på
application/octet-stream. - Inloggningsuppgifter krävs: Anslut era
httpQueryAuth-inloggningsuppgifter i HTML to PDF Request (autentisering använderhttpBearerAuth). - Öppna Store PDF to Disk och ställ in Operation på
write, File Name pådocument.pdf, och Data Property Name på=data. - Anslut Build HTML Binary → HTML to PDF Request → Store PDF to Disk.
application/octet-stream.Steg 5: testa och aktivera ert arbetsflöde
Kör ett manuellt test för att verifiera att HTML konverteras till PDF och lagras korrekt.
- Klicka på Execute Workflow på Manual Start Trigger.
- Verifiera att HTML to PDF Request returnerar en binär filutdata.
- Bekräfta att Store PDF to Disk skapar
document.pdfi ert konfigurerade filsystem. - När det är bekräftat, aktivera arbetsflödet med reglaget Active för användning i produktion.
Vanliga fallgropar
- ConvertAPI-uppgifter kan gå ut eller kräva specifika behörigheter. Om något slutar fungera, kontrollera ConvertAPI:s användarpanel → Authentication först.
- Om du använder Wait-noder eller extern rendering varierar processtiderna. Öka väntetiden om noder längre fram fallerar på tomma svar.
- Standardprompter i AI-noder är generiska. Lägg in din tonalitet tidigt, annars kommer du att redigera output för evigt.
Vanliga frågor
Cirka 30 minuter om du redan har din ConvertAPI-token.
Nej. Du klistrar mest in uppgifter och redigerar HTML-mallen. Den enda “kodiga” delen hanteras redan av flödets steg som bygger filen.
Ja. n8n har ett gratis self-hosted-alternativ och en gratis provperiod på n8n Cloud. Cloud-planer börjar på 20 USD/månad för högre volym. Du behöver också räkna in ConvertAPI-kostnader baserat på hur många filer du konverterar.
Två alternativ: n8n Cloud (hanterat, enklast att komma igång) eller self-hosting på en VPS. För self-hosting är Hostinger VPS prisvärd och klarar n8n bra. Self-hosting ger obegränsade körningar men kräver grundläggande serveradministration.
Ja, men du lägger till ett lagringssteg. Behåll ConvertAPI-requesten som den är och ersätt sedan filskrivningen “Store PDF to Disk” med en Google Drive-uppladdningsnode så att PDF:en hamnar i rätt mapp automatiskt. Vanliga anpassningar är dynamisk filnamngivning (kundnamn + datum), sparande i mappar per projekt och att byta ConvertAPI-endpoints för olika PDF-inställningar. Om du behöver koppla PDF:en till ett godkännandeflöde kan du också skicka Drive-länken till e-post eller Slack i samma körning.
Oftast är det ett auth-problem. Skapa en ny ConvertAPI API-token och bekräfta sedan att Authorization-headern använder en Bearer-token i HTTP Request-noden. Dubbelkolla också endpoint-URL:en du har satt i noden, eftersom ett litet skrivfel kan se ut som att “tjänsten ligger nere”. Om du konverterar många filer i en kort burst kan du också slå i rate limits för din ConvertAPI-plan.
På n8n Cloud Starter kan du köra några tusen flödeskörningar per månad, vilket räcker för många små team. Om du self-hostar finns ingen körningsgräns och genomströmningen beror på din server. ConvertAPI-användningen blir oftast ditt verkliga tak, så kontrollera plangränserna om du konverterar i bulk.
Ofta, ja. n8n är mer flexibelt när du behöver filhantering, anpassade HTTP-requests och förgreningslogik utan att betala extra per “premium”-steg. Det är också skönt att ha self-hosting-alternativet när volymen växer, om vi ska vara ärliga. Zapier eller Make kan fortfarande vara helt okej för väldigt enkla fall, som “URL in, PDF ut”, så länge formatering och lagring inte blir krånglig. Om du är osäker kan du prata med en automationsexpert så får du en rak rekommendation utifrån ditt exakta use case.
När det här väl är på plats slutar PDF-generering att vara en återkommande syssla. Du får konsekventa filer, strukturerad lagring och färre “kan du skicka den igen?”-meddelanden.
Kontakta oss
Hör av dig, så diskuterar vi hur just din verksamhet kan dra nytta av alla fantastiska möjligheter som AI skapar.