Mettez à jour vos modèles d'inventaire HTML pour la mise à niveau du générateur PDF

Mettez à jour vos modèles d'inventaire HTML pour la mise à niveau du générateur PDF

Cette page a été traduite à l'aide d'outils d'IA et peut contenir des erreurs. Pour obtenir les informations les plus précises et les plus récentes, veuillez consulter la version originale en anglais.

À qui cela s'adresse-t-il ?

Cette mise à niveau s'applique uniquement aux organisations qui utilisent l'ancien générateur PDF. Zoho CRM notifiera ces utilisateurs via une bannière intégrée à l'application, sur la page Modèles d'inventaire et lors de la génération de PDF.

Par conséquent, seuls les utilisateurs de ces organisations devront mettre à jour leurs modèles d'inventaire HTML.

Que faut-il faire ?

Il vous suffit de vérifier et de modifier les balises d'en-tête, de pied de page et de numéro de page dans le code HTML de vos modèles d'inventaire, afin de les mettre au format pris en charge. Après avoir enregistré le modèle, générez un PDF pour vérifier l'alignement en basculant vers le nouveau générateur PDF.

Afin d'éviter tout problème d'affichage ou de mise en page dans les PDF générés et d'assurer la compatibilité avec le générateur PDF optimisé, effectuez cette mise à jour avant le 31 mars 2026.
Notes
Remarque : à titre de solution de repli, l'ancien générateur PDF restera disponible pendant un mois, puis sera définitivement désactivé.
L'exemple fourni illustre l'utilisation des balises d'en-tête. Vous pouvez appliquer la même approche aux autres balises en suivant les instructions détaillées ci-après.


Procédure de mise à jour

Pour mettre à jour les balises HTML de tous vos modèles d'inventaire créés en HTML, suivez les étapes de mise en forme ci-dessous.
  1. Accédez à Configuration → Personnalisation → Modèles → Inventaire.
  2. Cliquez sur l'icône de modification du modèle créé en HTML.
  3. Cliquez sur l'icône Modifier le HTML.
  4. Repérez, en haut de votre code HTML, la balise <table> la plus externe. Dans les anciens modèles, elle se présente généralement comme suit :
    Quote
    <table>
    <thead>
    <!-- your header content: logo, company name, etc. -->
    </thead>
    <tbody>
    <!-- your main content: line items, totals, etc. -->
    </tbody>
    <tfoot>
    <!-- your footer content: page numbers, terms, etc. -->
    </tfoot>
    </table>

  5. Remplacez l'intégralité de cette table externe par trois blocs de sections HTML distincts. Copiez votre contenu d'en-tête, de corps et de pied de page dans le bloc correspondant :
    Quote
    <!-- HEADER BLOCK -->
    <section id="header-container" class="">
    <div id="pdfgen-header">
    <!-- Paste your former <thead> content here -->
    </div>
    </section>
       
    <!-- BODY / CONTENT BLOCK -->
    <section id="page-container" class="">
    <div id="pdfgen-content">
    <!-- Paste your former <tbody> content here -->
    </div>
    </section>

    <!-- FOOTER BLOCK -->
    <section id="footer-container" class="">
    <div id="pdfgen-footer">
    <!-- Paste your former <tfoot> content here -->
    </div>
    </section>

  6. L'ancien moteur utilisait une technique de compteur CSS pour générer les numéros de page. Le nouveau moteur injecte les numéros de page automatiquement ; ce CSS n'est donc plus nécessaire et doit être supprimé. Ne supprimez que les règles de compteur .pagenum. Ne supprimez pas l'intégralité de votre bloc <style> — tout autre CSS (polices, couleurs, styles de tableau, espacements, etc.) doit rester en place.
  7. Après la migration, si vous constatez des espaces blancs inattendus sur les bords de votre PDF, ajoutez ce CSS pour réinitialiser l'espacement par défaut du navigateur :
    Quote
    <style>
    html {
    margin: 0px;
    padding: 0px;
    }
    </style>
    Cette étape est facultative : ajoutez ce code uniquement si vous constatez des problèmes d'espacement dans l'aperçu.
Modifiez votre code HTML pour les éléments d'en-tête, de pied de page et de numéro de page conformément au tableau ci-dessous.
Éléments
Formats non pris en charge
Formats pris en charge
En-tête
Contenu encadré par <thead>...</thead> à l'intérieur du corps du tableau.
Le contenu doit être encadré par

<section id="header-container"class="">
<div id="pdfgen-header">
...
</div>
</section>

Le CSS requis pour le contenu de l'en-tête doit être fourni comme suit :

<style>
#pdfgen-header {
}
</style>
Pied de page
Contenu encadré par <tfoot>...</tfoot> à l'intérieur du corps du tableau.
Le contenu doit être encadré par

<section id="footer-container"class="">
<div id="pdfgen-footer">
...
</div>
</section>

Le CSS requis pour le contenu du pied de page doit être fourni comme suit :

<style>
#pdfgen-footer {
}
</style>
Numéro de page


<span
class="pagenum"></span>
<style>
*.pagenum:after {
counter-increment: page;
content: "" counter(page);
}
</style>
<span class="pageNumber"></span>

Pour obtenir le nombre total de pages, utilisez

<span class="totalPage"></span>

Qu'est-ce qui peut rester inchangé ?

  1. À l'exception des modifications mentionnées ci-dessus, le reste de la structure du code peut être conservé tel quel.
  2. Tableau de mise en page : se situe au niveau le plus élevé de votre HTML, encadre l'ensemble du contenu et possède <thead>/<tbody>/<tfoot> comme enfants directs.
  3. Tableau de données : se situe à l'intérieur de la zone de contenu principale et contient des lignes/colonnes de données métier réelles (produits, prix, etc.).
  4. Seul le tableau de mise en page doit être remplacé. Les tableaux de données qu'il contient restent inchangés.
  5. Supprimez uniquement les règles de compteur .pagenum. Ne supprimez pas l'intégralité de votre bloc <style> — tous les autres styles CSS (polices, couleurs, styles de tableau, espacements, etc.) doivent être conservés.
Une fois les balises mises à jour, enregistrez votre modèle et générez un PDF pour vérifier l'alignement. Par défaut, l'aperçu s'affiche dans le nouveau générateur PDF (Principal). Si l'aperçu est mal aligné, basculez vers l'ancien générateur PDF (Legacy) afin de visualiser l'aperçu produit par ce dernier.

Migration

Une fois toutes les étapes effectuées, vous pouvez lancer la migration vers le nouveau générateur PDF en cliquant sur le bouton Procéder à la migration depuis la page Modèles de stock. Cette option est disponible pour tous les administrateurs.

Idea
Des problèmes persistent ?
  1. Vérifiez que votre modèle ne contient pas plusieurs sections header-container ou footer-container.
  2. Vérifiez qu'aucune balise <tr> ou <td> ne se trouve en dehors d'un élément <table> réel.
  3. Confirmez que le nom de classe est bien pageNumber (N majuscule) et non pagenum.
  4. Assurez-vous de ne pas avoir supprimé par inadvertance du CSS sans rapport avec les compteurs de pages .pagenum.

Pour toute question concernant cette mise à jour, veuillez contacter support@zohocrm.com. Nous vous remercions de votre patience pendant que nous continuons à améliorer Zoho CRM.