Jan 01, 1970
Um guia para criar campos de formulário personalizados usando o Foxit PDF SDK for Web por@foxitsoftware
4,094 leituras
Um guia para criar campos de formulário personalizados usando o Foxit PDF SDK for Web
por Foxit Software8 min read2023/11/17
Foxit Software
@foxitsoftware
#1 PDF Brand Enable developers to incorporate powerful PDF technology...
Read this story in a terminal
Print this story
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.Foxit Software
@foxitsoftware
#1 PDF Brand Enable developers to incorporate powerful PDF technology into their applications.
STORY’S CREDIBILITY
Code License
The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.
Guide
Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.
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.
Documentação incluída
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
heightpara 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:
Visualização do aplicativo
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:
Aplicativo final
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.
Também publicado aqui .
L O A D I N G
. . . comments & more!
. . . comments & more!
About Author
Rótulos
ESTE ARTIGO FOI APRESENTADO EM...
HISTÓRIAS RELACIONADAS
X REMOVE AD
