[{"data":1,"prerenderedAt":126},["ShallowReactive",2],{"blog-it-editor-modelli-pdf-html-css":3},{"id":4,"title":5,"body":6,"categories":106,"date":108,"description":12,"draft":109,"excerpt":110,"extension":111,"image":112,"lang":113,"meta":114,"modified":115,"navigation":116,"noindex":109,"path":117,"related":110,"seo":118,"seoDescription":119,"seoTitle":120,"slug":121,"sourcePath":122,"sourceRoute":110,"stem":123,"tags":110,"translated":109,"type":124,"wpId":110,"__hash__":125},"blog\u002Fit\u002Fblog\u002Feditor-modelli-pdf-html-css.md","Editor HTML\u002FCSS per modelli PDF personalizzati con anteprima dal vivo",{"type":7,"value":8,"toc":97},"minimark",[9,13,18,21,25,28,32,35,39,64,71,75],[10,11,12],"p",{},"Fatture, offerte e altri documenti aziendali non devono essere solo corretti nei contenuti, ma anche rispecchiare graficamente la propria immagine coordinata. Spesso, però, la personalizzazione di questi modelli fallisce perché richiede strumenti esterni, competenze di programmazione o lunghe consultazioni con un fornitore esterno prima ancora di poter apportare una piccola modifica come un logo aggiornato. Per questo 1Tool integra direttamente nel software un proprio editor visuale per modelli PDF, con cui progettare documenti come fatture o offerte senza passare per strumenti esterni. Questo articolo descrive com'è strutturato l'editor e come funziona la generazione dei PDF che avviene dietro le quinte.",[14,15,17],"h2",{"id":16},"progettazione-basata-su-html-e-css","Progettazione basata su HTML e CSS",[10,19,20],{},"L'editor visuale di 1Tool consente di progettare i propri modelli PDF direttamente nel browser, sulla base di HTML e CSS. Chi conosce già queste tecnologie web può intervenire con grande precisione su layout, formattazione e struttura di un modello, per esempio per fatture o offerte. Poiché HTML e CSS sono standard molto diffusi e ben documentati, le conoscenze di sviluppo web già acquisite si possono usare direttamente per la progettazione di documenti aziendali, senza dover imparare una sintassi proprietaria inventata apposta per l'editor. Inoltre è possibile configurare margini, formato della carta e sfondo di ciascun modello, così da definire senza sforzi aggiuntivi anche le proprietà di layout fondamentali di un documento. In questo modo un modello può essere progettato, sia nei contenuti sia nell'aspetto, in linea con l'immagine coordinata dell'azienda. Anche piccoli adattamenti, per esempio al carattere, ai colori o al posizionamento di singoli elementi, si possono fare direttamente nel modello, invece di dover ricorrere ogni volta a un supporto esterno.",[14,22,24],{"id":23},"tre-schede-per-un-processo-di-modifica-controllato","Tre schede per un processo di modifica controllato",[10,26,27],{},"Affinché le modifiche a un modello non debbano essere fatte alla cieca, l'editor è suddiviso in tre schede: Modifica, Anteprima HTML e Anteprima PDF. Nella scheda Modifica si crea e si adatta il modello vero e proprio, mentre le due schede di anteprima mostrano subito l'effetto di una modifica: una come rappresentazione HTML, l'altra come vera anteprima PDF. In questo modo l'effetto di ogni adattamento si può verificare immediatamente in un'anteprima realistica, prima che il modello venga usato per documenti reali. Questo approccio riduce il rischio che un modello formattato male venga notato solo su una fattura già inviata a un cliente, perché ogni modifica può essere controllata nello stesso editor prima di essere messa in produzione. La struttura in tre passaggi rende l'editor accessibile anche a chi non lavora ogni giorno con HTML e CSS, perché l'effetto delle modifiche è sempre immediatamente visibile.",[14,29,31],{"id":30},"generazione-dei-pdf-con-gotenberg-in-background","Generazione dei PDF con Gotenberg in background",[10,33,34],{},"Per la generazione vera e propria del documento PDF finale a partire da un modello, in background entra in azione il motore di rendering Gotenberg, gestito direttamente da 1Tool. Gli utenti non devono occuparsi di questo processo tecnico: non appena un modello è completato e attivato, ogni documento basato su di esso viene generato automaticamente come PDF tramite questo motore. Questa separazione tra la progettazione del modello nel browser e la generazione del PDF in background garantisce che quanto visto nell'anteprima PDF corrisponda al documento effettivamente prodotto. Per le aziende questo significa potersi concentrare completamente sui contenuti e sulla grafica del modello, mentre la parte tecnica della generazione dei PDF funziona in modo affidabile in background. Un modello, una volta creato, si può quindi usare in modo permanente per tutti i documenti che ne derivano, senza alcun onere tecnico ricorrente.",[14,36,38],{"id":37},"domande-frequenti","Domande frequenti",[10,40,41,45,48,49,52,54,55,58,60,61],{},[42,43,44],"strong",{},"Devo saper programmare per creare un mio modello PDF?",[46,47],"br",{},"\nPer una progettazione personalizzata sono utili conoscenze di HTML e CSS, poiché l'editor si basa su queste tecnologie web.\n",[42,50,51],{},"A cosa servono le tre schede dell'editor?",[46,53],{},"\nLa scheda «Modifica» serve a creare il modello, mentre «Anteprima HTML» e «Anteprima PDF» rendono subito visibile l'effetto delle modifiche.\n",[42,56,57],{},"Devo installare io stesso un software per generare i PDF?",[46,59],{},"\nNo, la generazione dei PDF è affidata al motore di rendering Gotenberg, gestito interamente da 1Tool.\n",[42,62,63],{},"Quale dei suoi documenti aziendali trarrebbe più vantaggio da un modello PDF personalizzato?",[10,65,66],{},[67,68,70],"a",{"href":69},"\u002Fit\u002Frichiesta-di-appuntamento\u002F","Prenota una demo",[14,72,74],{"id":73},"leggi-anche","Leggi anche",[76,77,78,85,91],"ul",{},[79,80,81],"li",{},[67,82,84],{"href":83},"\u002Fit\u002Fblog\u002Fcampi-personalizzati-ogni-modulo\u002F","Campi dati personalizzati per ogni modulo: il sistema di campi personalizzati di 1Tool",[79,86,87],{},[67,88,90],{"href":89},"\u002Fit\u002Fblog\u002Fricerca-istantanea-impostazioni-algolia\u002F","Digitare invece di cliccare: la ricerca istantanea Algolia nelle impostazioni",[79,92,93],{},[67,94,96],{"href":95},"\u002Fit\u002Fblog\u002Fdashboard-report-personalizzabili-drag-and-drop\u002F","Report su misura: widget di report liberamente spostabili",{"title":98,"searchDepth":99,"depth":99,"links":100},"",2,[101,102,103,104,105],{"id":16,"depth":99,"text":17},{"id":23,"depth":99,"text":24},{"id":30,"depth":99,"text":31},{"id":37,"depth":99,"text":38},{"id":73,"depth":99,"text":74},[107],6064,"2026-04-30T09:00:00",false,null,"md","\u002Fmedia\u002F2026\u002F07\u002Fvisueller-pdf-vorlagen-editor.jpg","it",{},"2026-07-25T08:31:43",true,"\u002Fit\u002Fblog\u002Feditor-modelli-pdf-html-css",{"title":5,"description":12},"Crei i suoi modelli PDF per fatture e offerte con un editor HTML\u002FCSS e anteprima dal vivo.","Editor HTML\u002FCSS per modelli PDF con anteprima | 1Tool","editor-modelli-pdf-html-css","\u002Fit\u002Fblog\u002Feditor-modelli-pdf-html-css\u002F","it\u002Fblog\u002Feditor-modelli-pdf-html-css","posts","j5bvkwn20G-1B9qWXLaYC31ngBgFM_KA_dxetsxlaKQ",1791582097884]