CustomUIEditor Manual

25/4/24, 23:38 Getting Started | pdfme
Empezando
Empezando
pdfme fue creado para simplificar el proceso de diseño y generación de un PDF. Es

especialmente útil para los siguientes casos de uso:
Necesita crear un PDF diseñado con código corto.

Necesidad de integrar funciones del editor de PDF en una aplicación.
Necesidad de crear una gran cantidad de archivos PDF sin comprometer el rendimiento
Como ejemplo, el servicio del autor https://labelmake.jp/ puede crear más de 100 variedades de
archivos PDF y genera más de 100.000 archivos PDF por mes. En particular, el coste mensual del
servidor, que utiliza Cloud Functions para Firebase, se mantiene por debajo de los 10 dólares.
Los requisitos operativos deben ser el entorno del nodo >=16 .

Hay dos paquetes en pdfme, generador y UI.
El paquete para generar PDF se puede instalar con el siguiente comando.
npm i @pdfme/generator @pdfme/common
Los paquetes para usar el diseñador, los formularios y los visores de PDF se pueden instalar con
los siguientes comandos.
npm i @pdfme/ui @pdfme/common
* Debes instalar @pdfme/common independientemente del paquete que utilices.
Los siguientes tipos, funciones y clases están disponibles en pdfme.
@pdfme/common
https://pdfme.com/docs/getting-started 1/11
Plantilla
@pdfme/generator
generar
@pdfme/ui
Diseñador
Forma
Espectador
Si su entorno utiliza webpack, importe los elementos necesarios como se muestra a continuación.
import type { Template } from '@pdfme/common';

import { generate } from '@pdfme/generator';

import { Designer, Form, Viewer } from '@pdfme/ui';
Todos los objetos utilizan Template , que se explicará brevemente en la siguiente sección.
El núcleo de la biblioteca pdfme son las plantillas.

El tipo de plantilla se puede importar mediante ambos @pdfme/generator o @pdfme/ui . Las
plantillas se utilizan en todas partes.
Una plantilla se puede dividir en dos partes: una parte fija y una parte variable.
Los llamamos basePdf y esquema. La siguiente imagen es una buena ilustración de una plantilla.
basePdf : datos PDF para la parte fija del PDF que se generará.
esquemas : datos de definición para la parte variable del PDF que se generará.
A basePdf se le puede dar un formato string (base64), ArrayBuffer o Uint8Array .

Se puede importar un PDF A4 en blanco con BLANK_PDF . Puedes usarlo para comprobar cómo
funciona.
Los esquemas solo pueden utilizar texto de forma predeterminada, pero puede cargar imágenes
y varios códigos de barras, como códigos QR, como complementos del
@pdfme/schemas paquete.
Además, puede crear sus propios esquemas, lo que le permitirá representar tipos distintos de los
mencionados anteriormente.
Consulte los detalles sobre los esquemas personalizados desde aquí
Echemos un vistazo a algunos datos específicos.

(Si está utilizando TypeScript, puede importar el tipo de plantilla).
mínima
import { Template, BLANK_PDF } from '@pdfme/common';
const template: Template = {

basePdf: BLANK_PDF,
schemas: [
{
a: {
type: 'text',
position: { x: 0, y: 0 },
width: 10,
height: 10,
},
b: {
type: 'text',
position: { x: 10, y: 10 },
width: 10,
height: 10,
},
c: {
type: 'text',
position: { x: 20, y: 20 },
width: 10,
height: 10,
},
},
],
};
Puede crear una plantilla desde la página Diseño de plantilla . O, si desea integrar la función de
creación de plantillas en su aplicación, consulte la sección Diseñador .
La función generadora de PDF, generate toma 2 argumentos de template y inputs para

generar un PDF. Funciona tanto en Node.js como en el navegador.
El código para generar un archivo PDF usando la plantilla creada anteriormente se muestra a
continuación.

import { generate } from '@pdfme/generator';

// skip... Check the Template section.
};
const inputs = [{ a: 'a1', b: 'b1', c: 'c1' }];
generate({ template, inputs }).then((pdf) => {

console.log(pdf);
// Browser
// const blob = new Blob([pdf.buffer], { type: 'application/pdf' });
// window.open(URL.createObjectURL(blob));
// Node.js
// fs.writeFileSync(path.join(__dirname, `test.pdf`), pdf);
});
Puede crear un archivo PDF como el siguiente.
Además, cada elemento de la matriz de entradas corresponde a una página del PDF; puede crear
un archivo PDF de varias páginas proporcionando varios elementos de entradas.
La interfaz de usuario se compone de las clases Diseñador , Formulario y Visor .
El Diseñador le permite editar los esquemas de Plantilla, lo que facilita que cualquiera pueda
crear objetos Json de Plantilla.
Puede diseñar su propia plantilla desde la página Diseño de plantilla o puede integrar el
diseñador en su aplicación.
Integremos al diseñador usando la plantilla creada anteriormente como plantilla predeterminada.

import { Designer } from '@pdfme/ui';
const domContainer = document.getElementById('container');

// skip... Check the Template section.
};
const designer = new Designer({ domContainer, template });
Se crea una instancia de la clase Diseñador como se muestra arriba y el diseñador de plantillas se
muestra en el archivo domContainer .
Puede editar la plantilla como se muestra a continuación. El funcionamiento es como
Presentaciones de Google, etc., por lo que puedes utilizar atajos de teclado comunes.
La instancia del diseñador se puede manipular con los siguientes métodos.
saveTemplate
updateTemplate
getTemplate
onChangeTemplate
onSaveTemplate
destroy
Puede utilizar plantillas para crear formularios y visores de PDF.
El formulario crea una interfaz de usuario para que el usuario ingrese esquemas basados en la
plantilla.

import { Form } from '@pdfme/ui';

// skip...
};
// This is initial data.
const form = new Form({ domContainer, template, inputs });
La instancia del formulario tiene un método getInputs para obtener la entrada del usuario.
Puede generar un archivo PDF basado en la entrada del usuario pasando los datos que obtiene
getInputs como entradas para generar, como se muestra en el código a continuación.
generate({ template, inputs: form.getInputs() }).then((pdf) => {

const blob = new Blob([pdf.buffer], { type: 'application/pdf' });
window.open(URL.createObjectURL(blob));
});
Ver un archivo PDF en un navegador móvil es complicado, porque no se muestra bien en un

iframe.
El Visor es un subproducto del proceso de desarrollo del formulario, pero le permite mostrar a
sus usuarios una vista previa del archivo PDF que creará.
Usar el Visor es básicamente lo mismo que usar el Formulario, excepto que el usuario no puede
editarlo.

import { Viewer } from '@pdfme/ui';

// skip...
};
const viewer = new Viewer({ domContainer, template, inputs });
especiales
pdf-lib : Utilizado en la generación de PDF.
fontkit : Se utiliza en la representación de fuentes.
PDF.js : Se utiliza en la visualización de PDF.
Reaccionar : se utiliza en la construcción de la interfaz de usuario.
form-render : Se utiliza para crear la interfaz de usuario.
antd : Se utiliza para crear la interfaz de usuario.
reaccionar-movible , reaccionar-selecto , @scena/react-guides : utilizado en la interfaz de
usuario del diseñador.
dnd-kit : Utilizado en la interfaz de usuario del Diseñador.
Definitivamente no podría haber creado pdfme sin estas bibliotecas. Estoy agradecido a los
desarrolladores de estas bibliotecas.
Si desea contribuir a pdfme, consulte la página de la Guía de desarrollo .

¡Esperamos su contribución!
Edita esta página

CustomUIEditor Manual

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

CustomUIEditor Manual

Cargado por

Copyright:

Formatos disponibles

25/4/24, 23:38 Getting Started | pdfme

pdfme fue creado para simplificar el proceso de diseño y generación de un PDF. Es

Necesita crear un PDF diseñado con código corto.

Los requisitos operativos deben ser el entorno del nodo >=16 .

El paquete para generar PDF se puede instalar con el siguiente comando.

npm i @pdfme/generator @pdfme/common

npm i @pdfme/ui @pdfme/common

* Debes instalar @pdfme/common independientemente del paquete que utilices.

Los siguientes tipos, funciones y clases están disponibles en pdfme.

import type { Template } from '@pdfme/common';

import type { Template } from '@pdfme/common';

El núcleo de la biblioteca pdfme son las plantillas.

A basePdf se le puede dar un formato string (base64), ArrayBuffer o Uint8Array .

Echemos un vistazo a algunos datos específicos.

import { Template, BLANK_PDF } from '@pdfme/common';

const template: Template = {

La función generadora de PDF, generate toma 2 argumentos de template y inputs para

import type { Template } from '@pdfme/common';

const template: Template = {

generate({ template, inputs }).then((pdf) => {

Puede crear un archivo PDF como el siguiente.

La interfaz de usuario se compone de las clases Diseñador , Formulario y Visor .

Integremos al diseñador usando la plantilla creada anteriormente como plantilla predeterminada.

import type { Template } from '@pdfme/common';

const domContainer = document.getElementById('container');

const designer = new Designer({ domContainer, template });

La instancia del diseñador se puede manipular con los siguientes métodos.

Puede utilizar plantillas para crear formularios y visores de PDF.

import type { Template } from '@pdfme/common';

const domContainer = document.getElementById('container');

const form = new Form({ domContainer, template, inputs });

generate({ template, inputs: form.getInputs() }).then((pdf) => {

Ver un archivo PDF en un navegador móvil es complicado, porque no se muestra bien en un

import type { Template } from '@pdfme/common';

const domContainer = document.getElementById('container');

const viewer = new Viewer({ domContainer, template, inputs });

dnd-kit : Utilizado en la interfaz de usuario del Diseñador.

Si desea contribuir a pdfme, consulte la página de la Guía de desarrollo .

Edita esta página

También podría gustarte