[{"data":1,"prerenderedAt":126},["ShallowReactive",2],{"blog-es-editor-plantillas-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\u002Fes\u002Fblog\u002Feditor-plantillas-pdf-html-css.md","Editor HTML\u002FCSS para plantillas PDF propias con vista previa en directo",{"type":7,"value":8,"toc":97},"minimark",[9,13,18,21,25,28,32,35,39,64,71,75],[10,11,12],"p",{},"Las facturas, presupuestos y demás documentos comerciales no solo deben ser correctos en su contenido, sino también reflejar visualmente la identidad corporativa propia. Sin embargo, personalizar estas plantillas a menudo fracasa porque requiere herramientas externas, conocimientos de programación o largas consultas con un proveedor externo antes de poder hacer incluso un pequeño cambio, como sustituir el logotipo. Por eso 1Tool integra directamente en el software su propio editor visual de plantillas PDF, con el que se pueden diseñar documentos como facturas o presupuestos sin recurrir a herramientas externas. Este artículo describe cómo está estructurado el editor y cómo funciona la generación de los PDF en segundo plano.",[14,15,17],"h2",{"id":16},"diseño-basado-en-html-y-css","Diseño basado en HTML y CSS",[10,19,20],{},"El editor visual de 1Tool permite diseñar plantillas PDF propias directamente en el navegador, sobre la base de HTML y CSS. Quien ya conozca estas tecnologías web puede controlar con gran precisión el diseño, el formato y la estructura de una plantilla, por ejemplo para facturas o presupuestos. Como HTML y CSS son estándares muy extendidos y bien documentados, los conocimientos existentes de desarrollo web pueden aplicarse directamente al diseño de documentos comerciales, sin tener que aprender una sintaxis propietaria inventada expresamente para el editor. Además, se pueden configurar los márgenes, el formato del papel y el fondo de cada plantilla, de modo que también las propiedades básicas de diseño de un documento se definen sin esfuerzo adicional. Así, una plantilla puede diseñarse, tanto en contenido como en aspecto, de forma que encaje con la identidad corporativa de la empresa. También los ajustes menores, por ejemplo en la tipografía, los colores o la posición de elementos concretos, pueden hacerse directamente en la propia plantilla, en lugar de depender cada vez de ayuda externa.",[14,22,24],{"id":23},"tres-pestañas-para-un-proceso-de-edición-controlado","Tres pestañas para un proceso de edición controlado",[10,26,27],{},"Para que los cambios en una plantilla no se hagan a ciegas, el editor está dividido en tres pestañas: Editar, Vista previa HTML y Vista previa PDF. En la pestaña Editar se crea y se ajusta la plantilla propiamente dicha, mientras que las dos pestañas de vista previa muestran de inmediato el efecto de un cambio: una como representación HTML y otra como vista previa PDF real. De este modo, el efecto de cada ajuste puede comprobarse al instante en una vista previa realista antes de usar la plantilla para documentos reales. Este procedimiento reduce el riesgo de que una plantilla mal formateada solo se detecte en una factura ya enviada a un cliente, porque cada cambio puede verificarse en el mismo editor antes de pasar a producción. Esta estructura en tres pasos hace que el editor también sea accesible para usuarios que no trabajan a diario con HTML y CSS, ya que pueden ver en todo momento el efecto de sus ajustes.",[14,29,31],{"id":30},"generación-de-pdf-con-gotenberg-en-segundo-plano","Generación de PDF con Gotenberg en segundo plano",[10,33,34],{},"Para la generación propiamente dicha del documento PDF final a partir de una plantilla, en segundo plano se utiliza el motor de renderizado Gotenberg, gestionado por el propio 1Tool. Los usuarios no tienen que ocuparse de este proceso técnico: en cuanto una plantilla está terminada y activada, cada documento basado en ella se genera automáticamente como PDF mediante este motor. Esta separación entre el diseño de la plantilla en el navegador y la generación del PDF en segundo plano garantiza que lo que se vio en la vista previa PDF coincida con el documento realmente generado. Para las empresas, esto significa que pueden centrarse por completo en el contenido y el diseño de la plantilla, mientras la parte técnica de la generación de PDF funciona de forma fiable en segundo plano. Una plantilla, una vez creada, puede utilizarse así de forma permanente para todos los documentos basados en ella, sin esfuerzo técnico recurrente.",[14,36,38],{"id":37},"preguntas-frecuentes","Preguntas frecuentes",[10,40,41,45,48,49,52,54,55,58,60,61],{},[42,43,44],"strong",{},"¿Necesito saber programar para diseñar mi propia plantilla PDF?",[46,47],"br",{},"\nPara un diseño personalizado resultan útiles los conocimientos de HTML y CSS, ya que el editor se basa en estas tecnologías web.\n",[42,50,51],{},"¿Para qué sirven las tres pestañas del editor?",[46,53],{},"\nLa pestaña «Editar» sirve para crear la plantilla, mientras que «Vista previa HTML» y «Vista previa PDF» muestran de inmediato el efecto de los cambios.\n",[42,56,57],{},"¿Tengo que instalar yo mismo un software para generar los PDF?",[46,59],{},"\nNo, de la generación de PDF se encarga el motor de renderizado Gotenberg, gestionado íntegramente por 1Tool.\n",[42,62,63],{},"¿Cuál de sus documentos comerciales se beneficiaría más de una plantilla PDF personalizada?",[10,65,66],{},[67,68,70],"a",{"href":69},"\u002Fes\u002Fsolicitud-de-cita\u002F","Reservar una demo",[14,72,74],{"id":73},"leer-más","Leer más",[76,77,78,85,91],"ul",{},[79,80,81],"li",{},[67,82,84],{"href":83},"\u002Fes\u002Fblog\u002Fcampos-personalizados-cada-modulo\u002F","Campos de datos propios para cada módulo: el sistema de campos personalizados de 1Tool",[79,86,87],{},[67,88,90],{"href":89},"\u002Fes\u002Fblog\u002Fbusqueda-instantanea-configuracion-algolia\u002F","Escribir en lugar de hacer clic: búsqueda instantánea de Algolia en la configuración",[79,92,93],{},[67,94,96],{"href":95},"\u002Fes\u002Fblog\u002Fpaneles-informes-personalizables-arrastrar-soltar\u002F","Informes a su gusto: widgets de informes que se mueven libremente",{"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],5316,"2026-04-30T09:00:00",false,null,"md","\u002Fmedia\u002F2026\u002F07\u002Fvisueller-pdf-vorlagen-editor.jpg","es",{},"2026-07-25T08:31:43",true,"\u002Fes\u002Fblog\u002Feditor-plantillas-pdf-html-css",{"title":5,"description":12},"Diseñe sus propias plantillas PDF para facturas y presupuestos con un editor HTML\u002FCSS y vista previa en directo.","Editor HTML\u002FCSS de plantillas PDF con vista previa | 1Tool","editor-plantillas-pdf-html-css","\u002Fes\u002Fblog\u002Feditor-plantillas-pdf-html-css\u002F","es\u002Fblog\u002Feditor-plantillas-pdf-html-css","posts","Lu5ILdseOy3mQPmKyCZltIA1ZrMGZkeXgClqkyHG4ck",1791582073771]