Svennis Partner Zoho Italia Logo

Aggiornare i modelli HTML di inventario per l'upgrade del generatore PDF

Le schermate in questo articolo sono in lingua inglese. L'interfaccia di Zoho CRM potrebbe variare in base alla versione e alla lingua impostata.

A chi è destinato?

Questo aggiornamento si applica solo alle organizzazioni che utilizzano il vecchio generatore PDF. Zoho CRM avviserà questi utenti con un banner in-app all'interno della pagina Modelli di inventario e durante la generazione dei PDF. 

Pertanto, solo gli utenti di queste organizzazioni dovranno aggiornare i propri modelli HTML di inventario.

Cosa bisogna fare?

Tutto ciò che deve fare è rivedere e modificare i tag di intestazione, piè di pagina e numero di pagina nell'HTML dei modelli di inventario nel formato supportato. Dopo aver salvato il modello, generi un PDF per verificare l'allineamento passando al nuovo generatore PDF. 

Per evitare errori o disallineamenti nel PDF generato e garantire la compatibilità con il generatore PDF ottimizzato, La preghiamo di completare questo aggiornamento entro il 31 marzo 2026. 
Notes
Nota: come opzione di fallback, il vecchio generatore PDF sarà disponibile per un mese e poi verrà dismesso.  
L'esempio fornito illustra l'uso dei tag di intestazione. È possibile applicare lo stesso approccio ad altri tag utilizzando le indicazioni dettagliate che seguono.


Come aggiornare

Per aggiornare i tag HTML di tutti i modelli di inventario creati tramite HTML, segua i passaggi di allineamento riportati di seguito.
  1. Navighi su Impostazioni → Personalizzazione → Modelli → Inventario.
  2. Faccia clic sull'icona di modifica del modello creato con HTML.
  3. Faccia clic sull'icona Modifica HTML.
  4. Cerchi nella parte superiore del Suo HTML il tag <table> più esterno. Nei vecchi modelli, appare tipicamente così:
    Quote
    <table>
    <thead> 
         <!-- il contenuto dell'intestazione: logo, nome azienda, ecc. --> 
       </thead> 
       <tbody> 
         <!-- il contenuto principale: voci, totali, ecc. --> 
       </tbody> 
       <tfoot> 
         <!-- il contenuto del piè di pagina: numeri di pagina, termini, ecc. --> 
       </tfoot> 
    </table>

  5. Sostituisca l'intera tabella esterna con tre blocchi di sezione HTML separati. Copi il contenuto di intestazione, corpo e piè di pagina nel blocco corrispondente:
    Quote
    <!-- BLOCCO INTESTAZIONE --> 
     <section id="header-container" class=""> 
       <div id="pdfgen-header"> 
         <!-- Incollare qui il contenuto del precedente <thead> --> 
       </div> 
     </section> 
       
     <!-- BLOCCO CORPO / CONTENUTO --> 
     <section id="page-container" class=""> 
       <div id="pdfgen-content"> 
         <!-- Incollare qui il contenuto del precedente <tbody> --> 
       </div> 
     </section> 

       <!-- BLOCCO PIÈ DI PAGINA --> 
     <section id="footer-container" class=""> 
       <div id="pdfgen-footer"> 
         <!-- Incollare qui il contenuto del precedente <tfoot> --> 
       </div> 
     </section> 

  6. Il vecchio motore utilizzava una tecnica di contatore CSS per generare i numeri di pagina. Il motore migliorato inserisce i numeri di pagina automaticamente, quindi questo CSS non è più necessario e deve essere rimosso. Rimuova solo le regole del contatore .pagenum. Non elimini l'intero blocco <style> - tutti gli altri CSS (font, colori, stili delle tabelle, spaziatura, ecc.) devono rimanere al loro posto.
  7. Dopo la migrazione, se nota spazi bianchi inattesi attorno ai bordi del PDF, aggiunga questo CSS per reimpostare la spaziatura predefinita del browser:
    Quote
     <style> 
       html { 
         margin: 0px; 
         padding: 0px; 
       } 
     </style> 
    Questo è opzionale - lo aggiunga solo se nota problemi di spaziatura nell'anteprima.
Modifichi il codice HTML per i tag di intestazione, piè di pagina e interruzione di pagina come indicato nella tabella seguente.
Elementi
Formati non supportati
Formati supportati
Intestazione
Contenuto racchiuso tra <thead>...</thead> all'interno del corpo della tabella.
Il contenuto deve essere racchiuso tra

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

Il CSS necessario per il contenuto dell'intestazione deve essere fornito come segue:

<style>
#pdfgen-header {
}
</style>
Piè di pagina
Contenuto racchiuso tra <tfoot>...</tfoot> all'interno del corpo della tabella.
Il contenuto deve essere racchiuso tra

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

Il CSS necessario per il contenuto del piè di pagina deve essere fornito come segue:

<style>
#pdfgen-footer {
}
</style>
Numero di pagina


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

Per ottenere il conteggio totale delle pagine utilizzare

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

Cosa rimane invariato?

  1. Ad eccezione delle modifiche sopra menzionate, la struttura del codice rimanente può essere mantenuta.
  2. Tabella di layout: si trova al livello più esterno del Suo HTML, avvolge tutto, ha <thead>/<tbody>/<tfoot> come figli diretti.
  3. Tabella dati: si trova all'interno dell'area del contenuto principale e contiene righe/colonne di dati aziendali effettivi (prodotti, prezzi, ecc.).
  4. Solo la tabella di layout deve essere sostituita. Le tabelle dati al suo interno rimangono invariate. 
  5. Rimuova solo le regole del contatore .pagenum. Non elimini l'intero blocco <style> - tutti gli altri CSS (font, colori, stili delle tabelle, spaziatura, ecc.) devono rimanere al loro posto.
Una volta aggiornati i tag, salvi il modello e generi un PDF per verificare l'allineamento. Per verificare l'allineamento utilizzi Clicca qui in basso in modo da visualizzare l'anteprima prodotta dal generatore PDF ottimizzato (nuovo).



Idea
Riscontra ancora problemi?
  1. Verifichi di non avere più sezioni header-container o footer-container nello stesso modello.
  2. Verifichi che non ci siano tag <tr> o <td> al di fuori di un elemento <table> reale.
  3. Confermi che il nome della classe sia pageNumber (N maiuscola) - non pagenum.
  4. Si assicuri di non aver rimosso accidentalmente CSS non correlati ai contatori di pagina .pagenum.

In caso di domande relative a questo aggiornamento, contatti support@zohocrm.com. La ringraziamo per la Sua pazienza mentre continuiamo a migliorare Zoho CRM.

A chi è destinato?

Articoli Correlati

Creare una Homepage utilizzando la Home View in Canvas
Creare nuovi moduli per gestire ogni processo unico rivolto al cliente all'interno di Zoho CRM
Associazione molti-a-molti tra moduli
Classificare e monitorare lo stato dei record con la mappatura delle liste di selezione
Campo Indirizzo

Zoho Premium Partner

Hai bisogno di aiuto con Zoho CRM?

I nostri esperti possono aiutarti con implementazione, personalizzazione e supporto. Oltre 200 progetti completati dal 2011.

Contattaci