4,070 leituras

Um guia para criar campos de formulário personalizados usando o Foxit PDF SDK for Web

por Foxit Software8m2023/11/17

Muito longo; Para ler

Este tutorial ensinará como criar campos de formulário personalizados em documentos PDF do seu navegador da web usando o Foxit PDF Library for Web.

featured image - Um guia para criar campos de formulário personalizados usando o Foxit PDF SDK for Web

O formato PDF tornou-se indispensável nos softwares modernos, servindo como uma solução versátil para diversos tipos de documentos. Para empresas que buscam PDFs seguros, editáveis e fáceis de usar, o Foxit surge como uma escolha valiosa. As bibliotecas PDF SDK da Foxit apresentam uma ampla gama de recursos que atendem a diversos setores.

Os PDFs baseados em navegador da Web, em particular, encontram inúmeras aplicações no gerenciamento de documentos. Desempenham um papel fundamental em vários sistemas bancários, facilitando tarefas como a geração de extratos mensais. Além disso, o setor de compliance depende de PDFs baseados na Web para coleta e armazenamento seguro de dados.

Este tutorial orienta você no aproveitamento do Foxit PDF SDK for Web para criar campos de formulário personalizados em documentos PDF do seu navegador da web. O repositório GitHub que acompanha permite acompanhar e implementar as etapas descritas no tutorial.

O que é o Foxit PDF SDK para Web?

O Foxit PDF SDK for Web , entre os diversos PDF SDKs oferecidos pela Foxit, destaca-se como uma biblioteca de PDF abrangente que aproveita as vantagens do mecanismo de renderização da Foxit. Este SDK permite que você integre perfeitamente um visualizador de PDF abrangente e totalmente personalizável em seus aplicativos.

Os PDFs da Web criados com o SDK da Foxit permitem que os usuários visualizem, preencham, anote e assinem documentos em vários idiomas sem esforço, diretamente de seus navegadores móveis ou de desktop usando JavaScript. O SDK é compatível com todos os principais navegadores, incluindo Firefox, Safari, Chrome e Opera.

Para ilustrar a funcionalidade, você iniciará a criação de um novo projeto PDF a partir de um modelo, empregando o Foxit PDF SDK for Web para fornecer a estrutura necessária. Esta abordagem prática oferecerá uma demonstração prática de como o SDK aprimora os recursos de PDF em seus projetos baseados na Web.

Implementando o Foxit PDF SDK para Web

Baixe o Foxit PDF SDK para Web. O arquivo ZIP deve conter o SDK, documentação e exemplos.

Você pode visualizar esses exemplos executando um servidor HTTP no diretório descompactado.

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

Configure o projeto

Este tutorial usa Vite para ferramentas de frontend. É baseado em módulos ES (ESM), rápido e vem com tudo que você precisa para usar o SDK pronto para uso. Para criar um novo projeto a partir de um modelo e iniciar o servidor de desenvolvimento, certifique-se de ter o Node.js versão 12.2.0 ou mais recente e execute os seguintes comandos:

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

Mova o SDK para o diretório criado. Para o restante deste tutorial, presume-se que o SDK esteja disponível em ./FoxitPDFSDKForWeb , relativo ao diretório pai do projeto .

Carregando o PDF

Você precisará de um visualizador de PDF com um documento carregado para começar a experimentar. Para inicializar o visualizador de PDF, primeiro crie a estrutura HTML e carregue o 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> <!-- ... -->

Além disso, em style.css , adicione algum CSS para estilizar os 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 o SDK para criar uma instância do 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), }, });

Você pode encontrar seus valores para LicenseSN e LicenseKey dentro do arquivo ./FoxitPDFSDKForWeb/examples/license-key.js .

O pdfViewer é criado fornecendo ao construtor um objeto de configuração contendo:

libPath: o caminho relativo para a pasta lib do pacote SDK descompactado
jr: Opções de configuração para o mecanismo JR que incluem, principalmente, informações de licenciamento
custom.ScrollWrap: um componente personalizado que controla o tamanho e a rolagem do PDF, onde a configuração ajusta o visualizador ao contêiner

Com o pdfViewer criado, basta inicializá-lo e carregar o 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");

O trecho acima busca o arquivo PDF como um blob e o abre no visualizador usando seu método openPDFByFile() . O documento PDF usado é um guia de demonstração da documentação incluída no SDK.

O espaço adicional à direita servirá como menu para campos de formulário arrastáveis.

Criando campos de formulário personalizados

Tudo que você precisa para criar um campo de formulário com o Foxit SDK é um visualizador, os metadados do campo de formulário (como tipo de campo ou opções de seleção) e a posição do campo de formulário. Neste exemplo, você criará um conjunto de campos de formulário predefinidos com metadados prontos que o usuário pode arrastar e soltar no visualizador.

Definindo Metadados

Comece definindo os metadados para os campos permitidos, bem como ajudantes adicionais:

 // ... 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;

A função randomId() irá gerar IDs para identificar os campos do formulário no documento. FieldTypes é um atalho para referência mais rápida de tipos de campos predefinidos disponíveis no SDK. Cada entrada de campo do formulário contém:

Uma etiqueta para informar o usuário sobre seu uso
Um nome para combinar elementos arrastados com as entradas de metadados
Um tipo para indicar o tipo do campo
Uma largura e height para calcular o retângulo de posição dentro do PDF

Por último, comboBoxOptions e listBoxOptions contêm opções de exemplo para campos que exigem que os usuários selecionem uma.

Criando elementos de arrastar e soltar

Com os metadados prontos, você pode criar uma função para lidar com a lógica de arrastar e soltar, bem como o posicionamento dos campos do formulário:

 // ... 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); }); };

A função aceita PDFDoc — um objeto SDK que representa um documento PDF — como argumento. É usado para recuperar um objeto PDFForm , que será usado para adicionar e configurar os campos do formulário, após esses campos serem processados em elementos arrastáveis e adicionados ao menu lateral.

Cada elemento tem um atributo draggable definido como true para permitir o arrasto, bem como um id correspondente ao nome exclusivo de cada campo do formulário para combiná-los com os metadados subjacentes. Este ID é usado posteriormente dentro do ouvinte de evento dragstart para transferi-lo durante a ação de arrastar e soltar.

Para obter o parâmetro PDFDoc necessário para a função loadFormFieldsMenu() , você terá que obter a promessa resultante da função loadPDF() modificando-a conforme abaixo:

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

Com os itens de menu criados, o aplicativo agora fica assim:

Implementando a funcionalidade de arrastar e soltar

Tendo criado os elementos arrastáveis, é hora de implementar totalmente a funcionalidade de arrastar e soltar e permitir a criação de campos de formulário no visualizador:

 // ... 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); } }); }; // ...

No código acima, o ouvinte do evento dragover encaminha a interação a ser tratada no evento drop chamando preventDefault() .

Dentro do manipulador de eventos drop , os metadados correspondentes são primeiro recuperados usando os dados do elemento arrastado. Em seguida, a posição do mouse no evento é transformada em coordenadas PDF usando o método convertClientCoordToPDFCoord() disponível na instância pdfViewer .

A posição, os metadados e o ID gerado aleatoriamente são usados na chamada do método addControl() do objeto PDFForm criado anteriormente na função. O método aceita os seguintes argumentos:

O índice da página onde colocar o campo do formulário (recuperado da chamada convertClientCoordToPDFCoord() )
O ID gerado aleatoriamente para o campo de formulário recém-criado
O tipo do campo do formulário de acordo com as constantes fornecidas (recuperadas dos metadados)
O argumento que define o posicionamento do campo de formulário na forma de um retângulo, calculado usando largura e altura para fazer com que o mouse coordene o centro do campo de formulário

Por fim, caso o campo aceite uma lista de opções, primeiro ele é acessado pelo método getField() do objeto PDFForm através do ID. As opções são definidas de acordo usando o método setOptions() .

O aplicativo final, com alguns campos de formulário já colocados, fica assim:

Conclusão

Adicionar funcionalidade aos seus PDFs pode realmente trazer benefícios significativos para sua organização e usuários. Atualizações e assinaturas eletrônicas economizam tempo, dinheiro e esforço, enquanto documentos personalizados e seguros aumentam a confiança em sua empresa.

Conforme demonstrado anteriormente, a ferramenta PDF multilíngue da Foxit , juntamente com o Foxit PDF SDK for Web, oferece uma solução robusta. Você pode criar campos de formulário personalizados, implementar a funcionalidade de arrastar e soltar e desbloquear uma variedade de recursos. No entanto, esta é apenas a ponta do iceberg. O Foxit PDF SDK for Web oferece um conjunto abrangente de recursos para aprimorar ainda mais a funcionalidade do seu PDF.

Para se aprofundar nas possibilidades, consulte a documentação oficial e os recursos adicionais fornecidos pelo SDK. A documentação irá guiá-lo através de recursos avançados, opções de personalização e práticas recomendadas.

Se quiser revisar o tutorial ou verificar seu trabalho, você pode consultar o repositório GitHub associado ao tutorial. O repositório provavelmente contém o código-fonte, exemplos e materiais adicionais para ajudá-lo a compreender e implementar os conceitos abordados no tutorial.