4,075 lecturas

Una guía para crear campos de formulario personalizados utilizando Foxit PDF SDK para Web

por Foxit Software8m2023/11/17

Demasiado Largo; Para Leer

Este tutorial le enseñará cómo crear campos de formulario personalizados en los documentos PDF de su navegador web utilizando Foxit PDF Library para Web.

featured image - Una guía para crear campos de formulario personalizados utilizando Foxit PDF SDK para Web

El formato PDF se ha vuelto indispensable en el software moderno y sirve como una solución versátil para diversos tipos de documentos. Para las empresas que buscan archivos PDF seguros, editables y fáciles de usar, Foxit surge como una opción valiosa. Las bibliotecas PDF SDK de Foxit cuentan con una amplia gama de funciones que se adaptan a diversas industrias.

Los archivos PDF basados en navegador web, en particular, encuentran innumerables aplicaciones en la gestión de documentos. Desempeñan un papel fundamental en numerosos sistemas bancarios, facilitando tareas como la generación de extractos mensuales. Además, la industria del cumplimiento depende de los archivos PDF basados en la web para la recopilación y el almacenamiento seguros de datos.

Este tutorial lo guiará a través del uso de Foxit PDF SDK para Web para crear campos de formulario personalizados dentro de los documentos PDF de su navegador web. El repositorio de GitHub adjunto le permite seguir e implementar los pasos descritos en el tutorial.

¿Qué es Foxit PDF SDK para Web?

Foxit PDF SDK para Web , entre los diversos PDF SDK que ofrece Foxit, se destaca como una biblioteca de PDF integral que aprovecha las ventajas del motor de renderizado de Foxit. Este SDK le permite integrar perfectamente un visor de PDF completo y totalmente personalizable en sus aplicaciones.

Los archivos PDF web creados con el SDK de Foxit permiten a los usuarios ver, completar, anotar y firmar documentos sin esfuerzo en varios idiomas directamente desde sus navegadores móviles o de escritorio usando JavaScript. El SDK es compatible con los principales navegadores, incluidos Firefox, Safari, Chrome y Opera.

Para ilustrar la funcionalidad, se embarcará en la creación de un nuevo proyecto PDF a partir de una plantilla, empleando Foxit PDF SDK para Web para proporcionar la estructura necesaria. Este enfoque práctico ofrecerá una demostración práctica de cómo el SDK mejora las capacidades de PDF dentro de sus proyectos basados en web.

Implementación de Foxit PDF SDK para Web

Descargue Foxit PDF SDK para Web. El archivo ZIP debe contener el SDK, documentación y ejemplos.

Puede obtener una vista previa de estos ejemplos ejecutando un servidor HTTP desde el directorio descomprimido.

 # NPX available with NPM v5.2 or newer npx http-server

Configurar el proyecto

Este tutorial utiliza Vite para herramientas de interfaz. Está basado en módulos ES (ESM), es rápido y viene con todo lo que necesita para usar el SDK listo para usar. Para crear un nuevo proyecto a partir de una plantilla e iniciar el servidor de desarrollo, asegúrese de tener la versión 12.2.0 o posterior de Node.js y ejecute los siguientes comandos:

 npm create vite@latest project -- --template vanilla cd project npm install npm run dev

Mueva el SDK al directorio creado. Para el resto de este tutorial, se supone que el SDK está disponible en ./FoxitPDFSDKForWeb , en relación con el directorio del proyecto principal.

Cargando el PDF

Necesitará un visor de PDF con un documento cargado para comenzar a experimentar. Para inicializar el visor de PDF, primero cree la estructura HTML y cargue el SDK.

 <!-- index.html --> <!-- ... --> <body> <div class="container"> <div id="viewer"></div> <div id="menu"></div> </div> <script src="./FoxitPDFSDKForWeb/lib/PDFViewCtrl.full.js"></script> <script type="module" src="/main.js"></script> </body> <!-- ... -->

Además, en style.css , agrega algo de CSS para darle estilo a los elementos:

 /* style.css */ html { height: 100%; }b ody { height: 100%; margin: 0; }. container { width: 100%; height: 100%; display: flex; }# viewer { height: 100%; flex: 1; overflow: auto; }# menu { width: 10rem; }. menu-element { background: #f1f5f9; padding: 1rem; display: flex; justify-content: center; align-items: center;font-family: monospace; margin: 0.5rem; }

Dentro de main.js , use el SDK para crear una instancia de pdfViewer :

 import "./style.css"; const licenseSN = "..."; const licenseKey = "..."; const viewerContainer = document.getElementById("viewer"); const pdfViewer = new PDFViewCtrl.PDFViewer({ libPath: "./FoxitPDFSDKForWeb/lib", jr: { licenseSN, licenseKey, }, customs: { ScrollWrap: PDFViewCtrl.CustomScrollWrap.create(viewerContainer), }, });

Puede encontrar los valores de licenciaSN y licenciaKey dentro del archivo ./FoxitPDFSDKForWeb/examples/license-key.js .

El pdfViewer se crea proporcionando al constructor un objeto de configuración que contiene:

libPath: la ruta relativa a la carpeta lib del paquete SDK descomprimido
jr: opciones de configuración para el motor JR que incluyen, lo más importante, información de licencia
customs.ScrollWrap: un componente personalizado que controla el tamaño y el desplazamiento del PDF, donde su configuración ajusta el visor al contenedor.

Con pdfViewer creado, todo lo que tienes que hacer es inicializarlo y cargar el documento:

 // ... const loadPDF = async (url) => { const response = await fetch(url); const blob = await response.blob();return pdfViewer.openPDFByFile(blob); }; pdfViewer.init(viewerContainer); loadPDF("./FoxitPDFSDKForWeb/docs/FoxitPDFSDKforWeb_DemoGuide.pdf");

El fragmento anterior recupera el archivo PDF como un blob y lo abre en el visor usando su método openPDFByFile() . El documento PDF utilizado es una guía de demostración de la documentación incluida en el SDK.

El espacio adicional a la derecha servirá como menú para campos de formulario que se pueden arrastrar.

Crear campos de formulario personalizados

Todo lo que necesita para crear un campo de formulario con Foxit SDK es un visor, los metadatos del campo de formulario (como el tipo de campo u opciones de selección) y la posición del campo de formulario. Para este ejemplo, creará un conjunto de campos de formulario predefinidos con metadatos listos que el usuario puede arrastrar y soltar en el visor.

Definición de metadatos

Comience definiendo los metadatos para los campos permitidos, así como ayudas adicionales:

 // ... const menuContainer = document.getElementById("menu"); const randomId = () => `_${Math.random().toString(36).substring(2, 9)}`; const FieldTypes = PDFViewCtrl.PDF.form.constant.Field_Type; const formFields = [ { label: "Push Button", name: "push-button", type: FieldTypes.PushButton, width: 50, height: 30, }, { label: "Checkbox", name: "checkbox", type: FieldTypes.CheckBox, width: 50,height: 30, }, { label: "Radio Button", name: "radio-button", type: FieldTypes.RadioButton, width: 80, height: 30, }, { label: "Combo Box", name: "combo-box", type: FieldTypes.ComboBox, width: 60, height: 30, }, { label: "List Box", name: "list-box", type: FieldTypes.ListBox, width: 60, height: 100, }, { label: "Text", name: "text", type: FieldTypes.Text, width: 60, height: 30, }, ]; const comboBoxOptions = [ { label: "10", value: "10", selected: true, defaultSelected: true }, { label: "20", value: "20", selected: false, defaultSelected: false }, { label: "30", value: "30", selected: false, defaultSelected: false }, { label: "40", value: "40", selected: false, defaultSelected: false }, ]; const listBoxOptions = comboBoxOptions;

La función randomId() generará ID para identificar los campos del formulario dentro del documento. FieldTypes es un atajo para una referencia más rápida de los tipos de campos predefinidos disponibles en el SDK. Cada entrada de campo del formulario contiene:

Una etiqueta para informar al usuario sobre su uso.
Un nombre para hacer coincidir los elementos arrastrados con las entradas de metadatos.
Un tipo para indicar el tipo de campo.
Un ancho y height para calcular la posición del rectángulo dentro del PDF

Por último, comboBoxOptions y listBoxOptions contienen opciones de muestra para campos que requieren que los usuarios seleccionen uno.

Crear elementos de arrastrar y soltar

Con los metadatos listos, puedes crear una función para manejar la lógica de arrastrar y soltar, así como la ubicación de los campos del formulario:

 // ... const loadFormFieldsMenu = async (PDFDoc) => { const PDFForm = await PDFDoc.loadPDFForm(); formFields.forEach((formField) => { const element = document.createElement("div"); element.draggable = true; element.id = formField.name; element.classList.add("menu-element"); element.textContent = formField.label; element.addEventListener("dragstart", (event) => { event.dataTransfer.setData("text/plain", event.target.id); }); menuContainer.append(element); }); };

La función acepta PDFDoc , un objeto SDK que representa un documento PDF, como argumento. Se utiliza para recuperar un objeto PDFForm , que se utilizará para agregar y configurar los campos del formulario, después de que esos campos se procesen en elementos arrastrables y se agreguen al menú lateral.

Cada elemento tiene un atributo arrastrable establecido en verdadero para permitir el arrastre, así como una identificación correspondiente al nombre único de cada campo del formulario para que coincida con los metadatos subyacentes. Esta identificación se usa luego dentro del detector de eventos dragstart para transferirla durante la acción de arrastrar y soltar.

Para obtener el parámetro PDFDoc requerido para la función loadFormFieldsMenu() , deberá obtener la promesa resultante de la función loadPDF() modificándola como se muestra a continuación:

 // ... loadPDF("./FoxitPDFSDKForWeb/docs/FoxitPDFSDKforWeb_DemoGuide.pdf").then( (PDFDoc) => { loadFormFieldsMenu(PDFDoc); } );

Con los elementos del menú creados, la aplicación ahora se ve así:

Implementación de la funcionalidad de arrastrar y soltar

Habiendo creado los elementos arrastrables, es hora de implementar completamente la funcionalidad de arrastrar y soltar y permitir la creación de campos de formulario en el visor:

 // ... const loadFormFieldsMenu = async (PDFDoc) => { // ... viewerContainer.addEventListener("dragover", (event) => { event.preventDefault(); }); viewerContainer.addEventListener("drop", async (event) => { event.preventDefault(); const droppedFormFieldName = event.dataTransfer.getData("text/plain"); const formField = formFields.find( ({ name }) => name === droppedFormFieldName ); const pos = await pdfViewer.convertClientCoordToPDFCoord({ clientX: event.clientX, clientY: event.clientY, }); const id = randomId();await PDFForm.addControl(pos.index, id, formField.type, { left: pos.left - formField.width / 2, right: pos.left + formField.width / 2, top: pos.top + formField.height / 2, bottom: pos.top - formField.height / 2, }); const field = PDFForm.getField(id); if (formField.type === FieldTypes.ComboBox) { field.setOptions(comboBoxOptions); } else if (formField.type === FieldTypes.ListBox) { field.setOptions(listBoxOptions); } }); }; // ...

En el código anterior, el detector de eventos dragover reenvía la interacción que se manejará en el evento de colocación llamando a preventDefault() .

Dentro del controlador de eventos de colocación , los metadatos coincidentes se recuperan primero utilizando los datos del elemento arrastrado. Luego, la posición del mouse del evento se transforma en coordenadas PDF usando el método convertClientCoordToPDFCoord() disponible en la instancia de pdfViewer .

La posición, los metadatos y el ID generado aleatoriamente se utilizan en la llamada al método addControl() desde el objeto PDFForm creado anteriormente en la función. El método acepta los siguientes argumentos:

El índice de la página donde colocar el campo del formulario (obtenido de la llamada convertClientCoordToPDFCoord() )
El ID generado aleatoriamente para el campo de formulario recién creado
El tipo de campo del formulario según las constantes proporcionadas (obtenidas de metadatos)
El argumento que define la ubicación del campo del formulario en forma de rectángulo, calculado usando el ancho y el alto para hacer que el mouse coordine el centro del campo del formulario.

Finalmente, en caso de que el campo acepte una lista de opciones, primero se accede a él mediante el método getField() del objeto PDFForm utilizando el ID. Las opciones se configuran en consecuencia utilizando el método setOptions() .

La aplicación final, con algunos campos de formulario ya colocados, se ve así:

Conclusión

Agregar funcionalidad a sus archivos PDF puede aportar importantes beneficios a su organización y a sus usuarios. Las actualizaciones y firmas electrónicas ahorran tiempo, dinero y esfuerzo, mientras que los documentos personalizados y seguros mejoran la confianza en su empresa.

Como se demostró anteriormente, la herramienta PDF multilingüe de Foxit , junto con Foxit PDF SDK para Web, proporciona una solución sólida. Puede crear campos de formulario personalizados, implementar la funcionalidad de arrastrar y soltar y desbloquear una variedad de capacidades. Sin embargo, esto es sólo la punta del iceberg. Foxit PDF SDK para Web ofrece un conjunto completo de funciones para mejorar aún más la funcionalidad de PDF.

Para profundizar en las posibilidades, consulte la documentación oficial y los recursos adicionales proporcionados por el SDK. La documentación lo guiará a través de funciones avanzadas, opciones de personalización y mejores prácticas.

Si desea revisar el tutorial o comprobar su trabajo, puede consultar el repositorio de GitHub asociado con el tutorial. Es probable que el repositorio contenga el código fuente, ejemplos y materiales adicionales para ayudarle a comprender e implementar los conceptos tratados en el tutorial.