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,   surge como uma escolha valiosa.   apresentam uma ampla gama de recursos que atendem a diversos setores. o Foxit As bibliotecas PDF SDK da Foxit  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   que acompanha permite acompanhar e implementar as etapas descritas no tutorial. repositório GitHub   O que é o Foxit PDF SDK para 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. O Foxit PDF SDK for Web  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    o Foxit PDF SDK para Web. O arquivo ZIP deve conter o SDK, documentação e exemplos. Baixe  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   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: Vite   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   , relativo ao diretório pai   . ./FoxitPDFSDKForWeb 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.     <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   , adicione algum CSS para estilizar os 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 o SDK para criar uma instância do   : 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), }, });  Você pode encontrar seus valores para   e   dentro do arquivo   . LicenseSN LicenseKey ./FoxitPDFSDKForWeb/examples/license-key.js  O pdfViewer é criado fornecendo ao construtor um objeto de configuração contendo:    o caminho relativo para a pasta   do pacote SDK descompactado libPath: lib    Opções de configuração para o mecanismo JR que incluem, principalmente, informações de licenciamento jr:    um componente personalizado que controla o tamanho e a rolagem do PDF, onde a configuração ajusta o visualizador ao contêiner custom.ScrollWrap:  Com   criado, basta inicializá-lo e carregar o documento: o 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");  O trecho acima busca o arquivo PDF como um   e o abre no visualizador usando seu método   . O documento PDF usado é um guia de demonstração da documentação incluída no SDK.  blob openPDFByFile()  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   irá gerar IDs para identificar os campos do formulário no documento.   é 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: randomId() FieldTypes  Uma   para informar o usuário sobre seu uso etiqueta  Um   para combinar elementos arrastados com as entradas de metadados nome  Um   para indicar o tipo do campo tipo  Uma   e   para calcular o retângulo de posição dentro do PDF largura height  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   — um objeto SDK que representa um documento PDF — como argumento. É usado para recuperar um objeto   , 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. PDFDoc PDFForm  Cada elemento tem um atributo   definido como   para permitir o arrasto, bem como um   correspondente ao nome exclusivo de cada campo do formulário para combiná-los com os metadados subjacentes. Este   é usado posteriormente dentro do ouvinte de evento   para transferi-lo durante a ação de arrastar e soltar. draggable true id ID dragstart  Para obter o parâmetro   necessário para a função   , você terá que obter a   resultante da função   modificando-a conforme abaixo: PDFDoc loadFormFieldsMenu() promessa loadPDF()   // ... 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   encaminha a interação a ser tratada no evento   chamando   . dragover drop preventDefault()  Dentro do manipulador de eventos   , 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   disponível na instância   . drop convertClientCoordToPDFCoord() pdfViewer  A posição, os metadados e o ID gerado aleatoriamente são usados na chamada do método   do objeto   criado anteriormente na função. O método aceita os seguintes argumentos: addControl() PDFForm  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   e   para fazer com que o mouse coordene o centro do campo de formulário largura altura  Por fim, caso o campo aceite uma lista de opções, primeiro ele é acessado pelo método   do objeto   através do ID. As opções são definidas de acordo usando o método   . getField() PDFForm 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   , 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. da Foxit  Para se aprofundar nas possibilidades, consulte a   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. documentação oficial  Se quiser revisar o tutorial ou verificar seu trabalho, você pode consultar o   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. repositório GitHub  Também publicado   . aqui

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 áudio é produzido no idioma original da história!

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

About Author

COMENTARIOS

Rótulos

ESTE ARTIGO FOI APRESENTADO EM

Related Stories

Guia do arquiteto para construir arquitetura de referência para um Datalake de IA/ML

O guia completo para uma migração bem-sucedida para a nuvem: estratégias e práticas recomendadas

De fóruns a feeds: como os algoritmos de mídia social moldam a interação digital

Quer ganhar um concurso de redação do HackerNoon? Aqui está o que os vencedores do concurso #crypto-api recomendam

Guia do arquiteto para construir arquitetura de referência para um Datalake de IA/ML

O guia completo para uma migração bem-sucedida para a nuvem: estratégias e práticas recomendadas

De fóruns a feeds: como os algoritmos de mídia social moldam a interação digital

Quer ganhar um concurso de redação do HackerNoon? Aqui está o que os vencedores do concurso #crypto-api recomendam

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps