Workflow n8nWebhook

Automatisation Webhook avec n8n : génération de PDF à la demande

Ce workflow n8n a pour objectif de transformer des données HTML en fichiers PDF, facilitant ainsi la création de documents à la demande. Dans un contexte professionnel où la documentation est essentielle, ce type d'automatisation n8n permet aux équipes de gagner un temps précieux en évitant les processus manuels de conversion. Par exemple, une entreprise pourrait l'utiliser pour générer des factures ou des rapports à partir de données saisies par les utilisateurs via un formulaire en ligne. Étape 1 : le workflow commence par un déclencheur Webhook qui reçoit les données HTML à convertir. Étape 2 : ensuite, les données passent par un nœud de traitement qui prétraite les informations selon des règles définies par l'utilisateur. Étape 3 : les données sont ensuite configurées dans un nœud 'Set data' pour préparer la conversion. Étape 4 : le nœud 'HTML to PDF' prend alors le relais pour générer le fichier PDF à partir des données HTML. Enfin, le workflow répond au Webhook avec le fichier PDF généré, permettant à l'utilisateur de le télécharger immédiatement. Grâce à cette automatisation, les entreprises peuvent réduire les erreurs humaines, améliorer leur efficacité opérationnelle et offrir un meilleur service client en fournissant des documents rapidement et de manière fiable.

05Nœuds05Intégrations05ÉtapesPrêt à l'emploi

automatisation webhook PDF n8n documentation

Pour qui

À qui s'adresse ce workflow ?

Ce workflow s'adresse aux entreprises et équipes qui nécessitent une génération de documents automatisée, comme les services financiers, les agences de marketing ou toute organisation traitant des données clients. Un niveau technique intermédiaire est recommandé pour la mise en place et la personnalisation.

Le problème

Ce que ce workflow résout

Ce workflow résout le problème de la conversion manuelle de données HTML en PDF, un processus souvent long et sujet à erreurs. En automatisant cette tâche, les utilisateurs éliminent les frustrations liées à la création de documents, réduisent le temps de traitement et minimisent les risques d'erreurs. Après la mise en place, les utilisateurs peuvent générer des documents en quelques clics, augmentant ainsi leur productivité.

Les étapes

Comment ça fonctionne

Étape 1 : le workflow est déclenché par un Webhook qui reçoit des données HTML.

01Étape 1 : les données passent par un nœud de prétraitement pour appliquer des transformations nécessaires.
02Étape 2 : le nœud 'Set data' configure les données pour la conversion.
03Étape 3 : le nœud 'HTML to PDF' génère le fichier PDF à partir des données.
04Étape 4 : enfin, le workflow répond au Webhook avec le fichier PDF, prêt à être téléchargé.

Besoin d'aide

On adapte ce workflow à votre stack.

CRM, outils internes, briques métier — on connecte tout via n8n et on vous livre une automatisation prête à l'emploi.

Audit gratuit · 48h

Schéma visuel

Visualisation du workflow n8n

Schéma des nœuds et connexions de ce workflow n8n, généré à partir du JSON n8n.

React Flow

Besoin d'aide ?

JSON n8n

Importer dans n8n en un clic

Inscris-toi gratuitement pour télécharger le fichier .json, puis fais Import from File dans n8n pour déployer le workflow en quelques secondes.

automatisation-webhook-avec-n8n-generation-de-pdf-a-la-demande.json· 165 lignes

Réservé membres

{
  "meta": {
    "instanceId": "fcf18fc485cc336a31bc65574fd28e124660f468281b7aad773616b17903afe6",
    "templateCredsSetupCompleted": true
  },
  "nodes": [
    {
      "id": "de602925-4d9d-4045-9d9d-ed37dfb65490",
      "name": "HTML to PDF",
      "type": "@custom-js/n8n-nodes-pdf-toolkit.html2Pdf",
      "position": [
        460,
        -20
      ],
      "parameters": {
        "htmlInput": "=<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Invoice</title>\n    <style>\n        /* Global Reset */\n        * {\n            margin: 0;\n            padding: 0;\n            box-sizing: border-box;\n        }\n\n        /* Body and Container */\n        body {\n            font-family: 'Roboto', sans-serif;\n            background: #f4f7fc;\n            display: flex;\n            justify-content: center;\n            padding: 30px;\n        }\n\n        .invoice-wrapper {\n            width: 100%;\n            max-width: 900px;\n            background: linear-gradient(145deg, #ffffff, #e6f7ff);\n            border-radius: 10px;\n            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);\n            padding: 40px;\n            margin-top: 50px;\n        }\n\n        /* Header */\n        .header {\n            background: linear-gradient(145deg, #3f51b5, #2196f3);\n            text-align: center;\n            color: #fff;\n            padding: 30px;\n            border-radius: 8px;\n        }\n\n        .header h1 {\n            font-size: 40px;\n            margin-bottom: 10px;\n        }\n\n        .header p {\n            font-size: 18px;\n            font-weight: 400;\n        }\n\n        /* Invoice Details Section */\n        .invoice-details {\n            display: flex;\n            justify-content: space-between;\n            margin-top: 30px;\n            border-top: 2px solid #eee;\n            padding-top: 30px;\n        }\n\n        .invoice-details div {\n            width: 48%;\n        }\n\n        .invoice-details h3 {\n            color: #3f51b5;\n            font-size: 20px;\n            margin-bottom: 15px;\n        }\n\n        .invoice-details p {\n            font-size: 15px;\n            color: #555;\n            line-height: 1.6;\n        }\n\n        /* Table Styling */\n        .table {\n            width: 100%;\n            border-collapse: collapse;\n            margin-top: 30px;\n        }\n\n        .table th,\n        .table td {\n            padding: 16px;\n            text-align: left;\n            font-size: 15px;\n            color: #555;\n        }\n\n        .table th {\n            background-color: #f1f5fc;\n            color: #3f51b5;\n            font-weight: 500;\n        }\n\n        .table td {\n            background-color: #fff;\n            border-bottom: 1px solid #e6e9f1;\n        }\n\n        .table tr:last-child td {\n            border-bottom: none;\n        }\n\n        .table .total {\n            font-weight: 600;\n            font-size: 18px;\n            color: #333;\n            background-color: #f1f5fc;\n        }\n\n        .table .total td {\n            text-align: right;\n        }\n\n        .table tr:nth-child(even) {\n            background-color: #f9f9f9;\n        }\n\n        /* Footer */\n        .footer {\n            text-align: center;\n            margin-top: 30px;\n            font-size: 15px;\n            color: #777;\n        }\n\n        .footer a {\n            color: #2196f3;\n            text-decoration: none;\n            font-weight: 500;\n        }\n\n        .footer a:hover {\n            text-decoration: underline;\n        }\n\n        /* Button */\n        .btn {\n            display: inline-block;\n            background-color: #2196f3;\n            color: white !important;\n            font-size: 16px;\n            font-weight: 600;\n            padding: 12px 25px;\n            margin-top: 25px;\n            text-decoration: none;\n            border-radius: 5px;\n            transition: background-color 0.3s ease;\n            box-shadow: 0 6px 15px rgba(33, 150, 243, 0.2);\n        }\n\n        .btn:hover {\n            background-color: #1976d2;\n        }\n\n        .btn:active {\n            background-color: #1565c0;\n        }\n    </style>\n</head>\n<body>\n\n<div class=\"invoice-wrapper\">\n    <div class=\"header\">\n        <h1>Invoice</h1>\n        <p>Invoice #{{ $('Set data').item.json['Invoice No'] }}</p>\n    </div>\n\n    <div class=\"invoice-details\">\n        <div>\n            <h3>Billed To:</h3>\n            {{ $json.bill_to }}\n        </div>\n        <div>\n            <h3>From:</h3>\n            {{ $json.from }}\n            <p>Email: {{ $('Set data').item.json.Email }}</p>\n        </div>\n    </div>\n\n    <table class=\"table\">\n        <thead>\n            <tr>\n                <th>Description</th>\n                <th>Unit Price</th>\n                <th>Quantity</th>\n                <th>Total</th>\n            </tr>\n        </thead>\n        <tbody>\n            {{ $json.details }}\n            <tr class=\"total\">\n                <td colspan=\"3\">Total Amount</td>\n                <td>${{ $json.total }}</td>\n            </tr>\n        </tbody>\n    </table>\n\n    <div class=\"footer\">\n        <p>Thank you for doing business with us!</p>\n        <p>If you have any questions regarding this invoice, please contact us at <a href=\"mailto:contact@abccorp.com\">{{ $('Set data').item.json.Email }}</a>.</p>\n        <a href=\"mailto:{{ $('Set data').item.json.Email }}\" class=\"btn\">Contact Us</a>\n    </div>\n</div>\n\n</body>\n</html>"
      },
      "credentials": {
        "customJsApi": {
          "id": "SZkqeEHVYyWhaGem",
          "name": "CustomJS account"
        }

JSON complet réservé membres

Inscris-toi gratuitement pour télécharger le workflow et l'importer dans n8n.

Télécharger gratuitement

Inscription en 30 secondes · Sans CB

Guide

Personnaliser ce workflow

Pour personnaliser ce workflow, commencez par modifier l'URL du Webhook pour l'intégrer à votre application. Ensuite, ajustez le code JavaScript dans le nœud 'Preprocess' pour répondre à vos besoins spécifiques de traitement des données. Vous pouvez également changer les paramètres dans le nœud 'Set data' pour définir quelles données seront incluses dans le PDF. Assurez-vous que le format HTML que vous envoyez est compatible avec le nœud 'HTML to PDF'. Enfin, surveillez le flux en utilisant les outils de logging de n8n pour détecter d'éventuelles erreurs.

Les nœuds

Détail des nœuds n8n

01
HTML to PDF
Ce noeud convertit un contenu HTML en fichier PDF.
02
Preprocess
Ce noeud exécute un code JavaScript pour prétraiter des données.
03
Set data
Ce noeud permet de définir et d'assigner des données dans le workflow.
04
Webhook
Ce noeud crée un point d'entrée pour recevoir des requêtes via un webhook.
05
Respond to Webhook
Ce noeud envoie une réponse à la requête reçue par le webhook.

Dernière étape

Vous n'avez pas besoin de plus de canaux.
Vous avez besoin d'un pilote.