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,   surge como una opción valiosa.   cuentan con una amplia gama de funciones que se adaptan a diversas industrias. Foxit Las bibliotecas PDF SDK de Foxit  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   adjunto le permite seguir e implementar los pasos descritos en el tutorial. repositorio de GitHub   ¿Qué es 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. Foxit PDF SDK para Web  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    Foxit PDF SDK para Web. El archivo ZIP debe contener el SDK, documentación y ejemplos. Descargue  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   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: Vite   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   , en relación con el directorio   principal. ./FoxitPDFSDKForWeb del proyecto   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.     <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   , agrega algo de CSS para darle estilo a los elementos: style.css   /* 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   , use el SDK para crear una instancia de   : main.js 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   y   dentro del archivo   . licenciaSN licenciaKey ./FoxitPDFSDKForWeb/examples/license-key.js  El pdfViewer se crea proporcionando al constructor un objeto de configuración que contiene:    la ruta relativa a la carpeta   del paquete SDK descomprimido libPath: lib    opciones de configuración para el motor JR que incluyen, lo más importante, información de licencia jr:    un componente personalizado que controla el tamaño y el desplazamiento del PDF, donde su configuración ajusta el visor al contenedor. customs.ScrollWrap:  Con   creado, todo lo que tienes que hacer es inicializarlo y cargar el documento: pdfViewer   // ... 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   y lo abre en el visor usando su método   . El documento PDF utilizado es una guía de demostración de la documentación incluida en el SDK.  blob openPDFByFile()  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   generará ID para identificar los campos del formulario dentro del documento.   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: randomId() FieldTypes  Una   para informar al usuario sobre su uso. etiqueta  Un   para hacer coincidir los elementos arrastrados con las entradas de metadatos. nombre  Un   para indicar el tipo de campo. tipo  Un   y   para calcular la posición del rectángulo dentro del PDF ancho height  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   , un objeto SDK que representa un documento PDF, como argumento. Se utiliza para recuperar un objeto   , 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. PDFDoc PDFForm  Cada elemento tiene un atributo   establecido en   para permitir el arrastre, así como una   correspondiente al nombre único de cada campo del formulario para que coincida con los metadatos subyacentes. Esta   se usa luego dentro del detector de eventos   para transferirla durante la acción de arrastrar y soltar. arrastrable verdadero identificación identificación dragstart  Para obtener el parámetro   requerido para la función   , deberá obtener la   resultante de la función   modificándola como se muestra a continuación: PDFDoc loadFormFieldsMenu() promesa loadPDF()   // ... 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   reenvía la interacción que se manejará en el evento   llamando a   . dragover de colocación preventDefault()  Dentro del controlador de eventos   , 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   disponible en la instancia   . de colocación convertClientCoordToPDFCoord() de pdfViewer  La posición, los metadatos y el ID generado aleatoriamente se utilizan en la llamada al método   desde el objeto   creado anteriormente en la función. El método acepta los siguientes argumentos: addControl() PDFForm  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   y   para hacer que el mouse coordine el centro del campo del formulario. el ancho el alto  Finalmente, en caso de que el campo acepte una lista de opciones, primero se accede a él mediante el método   del objeto   utilizando el ID. Las opciones se configuran en consecuencia utilizando el método   . getField() PDFForm 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   , 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. de Foxit  Para profundizar en las posibilidades, consulte la   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. documentación oficial  Si desea revisar el tutorial o comprobar su trabajo, puede consultar el   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. repositorio de GitHub  También publicado   . aquí

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

Free Trial

Now Hiring

Este audio es producido en el idioma original de la historia!

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

About Author

COMENTARIOS

ETIQUETAS

ESTE ARTÍCULO FUE PRESENTADO EN

Related Stories

Navegando por las aguas: desarrollo de aplicaciones RAG de nivel de producción con lagos de datos

El modelo Bitcoin UTXO, impulsando un ecosistema único

Liberando el poder de la IA. Una revisión sistemática de técnicas de vanguardia: resumen e introducción

Navegando por las aguas: desarrollo de aplicaciones RAG de nivel de producción con lagos de datos

El modelo Bitcoin UTXO, impulsando un ecosistema único

Liberando el poder de la IA. Una revisión sistemática de técnicas de vanguardia: resumen e introducción

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps