Como adicionar ferramentas de anotação, redação e editor de formulários a um visualizador de PDF JavaScript

À medida que mais aplicativos de negócios migram para o ambiente web, faz sentido que coisas como compartilhamento e edição de documentos também migram para o navegador. No entanto, em muitas situações, os usuários precisarão fazer mais do que simplesmente visualizar um documento PDF.

Eles podem precisar adicionar anotações para fornecer informações adicionais, redigir informações pessoais do documento ou até mesmo preencher campos de formulário no documento. Felizmente, o Document Solutions JavaScript PDF Viewer facilita a adição dessa funcionalidade ao seu aplicativo JavaScript .

Neste artigo, examinaremos os seguintes recursos do Document Solutions JavaScript PDF Viewer:

• Editor de anotações para JavaScript PDF Viewer

• Principais recursos de anotações

• Editar conteúdo de um PDF

• Editor de formulário para visualizador de PDF JavaScript

• Principais recursos do editor de formulários

• Opções adicionais de edição para visualizador de PDF

  
  

Agora, vamos dar uma olhada nesses recursos.

Editor de anotações para JavaScript PDF Viewer

As ferramentas de anotação no Document Solutions JavaScript PDF Viewer ajudarão os usuários a revisar e marcar informações importantes em seus documentos PDF. Eles também poderão adicionar, modificar e remover anotações de documentos PDF existentes, preservando o conteúdo original.

Os usuários podem fazer anotações no PDF e comentar e responder aos comentários uns dos outros. Com a capacidade de ocultar anotações, os usuários podem visualizar e imprimir facilmente os documentos originais e, se necessário, também podem imprimir cópias que incluam suas anotações. O Editor de Anotações lista todas as anotações do seu documento, o que permite acessar e modificar as anotações existentes:

Casos de uso e benefícios

Normalmente, os usuários contam com o Adobe Acrobat para fazer anotações em PDFs. Com um visualizador que inclui recursos de edição, seus usuários podem fazer anotações em seus documentos diretamente no aplicativo, sem precisar alternar entre os aplicativos. Como você pode ver, um visualizador que inclui recursos de edição pode agilizar significativamente o fluxo de trabalho de uma empresa.

Aqui estão apenas alguns exemplos em que essa funcionalidade seria benéfica:

• Um funcionário de uma empresa deseja enviar relatórios financeiros à administração para revisão. A gerência pode abrir os relatórios on-line no visualizador de PDF, usar anotações para sugerir alterações e informar ao funcionário que comentários foram feitos. O funcionário pode então abrir o documento no editor online e atualizá-lo no visualizador utilizando as anotações feitas.

• Um funcionário tem dúvidas sobre a estrutura salarial da sua empresa. Eles podem ler os documentos no PDF Viewer, redigir informações confidenciais e marcar áreas que precisam de esclarecimento por meio de ferramentas de anotação.

• Um designer de site prepara capturas de tela para um site e as combina em um PDF para enviar para revisão. Os revisores marcam as áreas que precisam de alterações usando as ferramentas de anotação.

  
  

As ferramentas de anotação no Document Solutions JavaScript PDF Viewer tornam todos esses cenários possíveis. Vamos examinar os recursos incluídos nas anotações.

Principais recursos de anotações

Os seguintes recursos principais estão disponíveis com anotações:

• Edite PDFs com diversas anotações
• Marque informações importantes por meio de uma interface amigável
• Adicionar, modificar e remover anotações de PDFs novos e existentes
• Aprimorar conteúdo PDF e aplicar propriedades específicas de anotação
• Imprima o PDF original sem modificações
• Salve o PDF modificado com anotações no cliente

Edite PDFs com diversas anotações

O Document Solutions PDF Viewer oferece suporte a todas as anotações necessárias para revisar seus documentos PDF. Você pode adicionar o seguinte:

• Anotações de texto (nota adesiva) - Adiciona texto ou notas adesivas no PDF
• Anotação de texto livre - Adiciona uma nota que está sempre visível no PDF
• Anotação em tinta - Desenha rabiscos à mão livre no PDF
• Anotação quadrada - Adiciona uma forma retangular/quadrada ao PDF
• Anotação de Círculo - Adiciona uma forma de círculo no PDF
• Anotação de Linha - Adiciona uma linha reta no PDF
• Anotação de polilinha - Adiciona formas fechadas ou abertas com múltiplas bordas no PDF
• Anotação de polígono - Adiciona um polígono no PDF
• Anotação de anexo de arquivo - anexe um arquivo ao documento, que será incorporado ao PDF
• Anotação de Som - Adiciona som (formato .au, .aiff ou .wav) importado de um arquivo ou gravado do microfone do computador
• Anotação de link - adiciona links que podem direcionar para diferentes páginas da web, chamar mecanismos de pesquisa e executar JavaScript
• Anotação de carimbo - Use imagens, localmente ou de um servidor, como anotações no PDF

Marque informações importantes por meio de uma interface amigável

As ferramentas de anotação do Document Solutions PDF Viewer possuem uma interface de usuário intuitiva que permite aos usuários fazer anotações no PDF. O PDF Viewer inclui uma barra de ferramentas de anotações e um editor separados para adicionar anotações, modificar suas propriedades ou excluir anotações do PDF existente.

O painel Propriedade exibe uma lista de anotações no seu documento. Você pode selecionar qualquer anotação no PDF, aplicar propriedades específicas da anotação no painel esquerdo ou excluir a anotação.

Na guia Página do painel, você pode ver quantas anotações existem em sua página. Ao enviar seu documento para revisão, você pode identificar o número de edições feitas.

Adicionar, modificar e remover anotações de PDFs novos e existentes

Você pode editar anotações existentes ou removê-las a qualquer momento enquanto revisa PDFs no JavaScript PDF Viewer. Para adicionar uma anotação, basta clicar no botão Editor de Anotações no painel esquerdo e você verá a Barra de Ferramentas de Anotações . Clique em qualquer anotação e desenhe diretamente no PDF. Selecione a anotação e você verá as propriedades da anotação exibidas no painel esquerdo. Você também pode carregar um PDF com anotações existentes, selecionar a anotação, modificar as propriedades ou excluir a anotação do painel de propriedades.

Aprimorar conteúdo PDF e aplicar propriedades específicas de anotação

Os usuários encontrarão amplo suporte para definir propriedades específicas de anotações no visualizador. Você pode adicionar rich text, definir a cor do texto, adicionar uma borda, definir autor e assunto, adicionar uma resposta, definir a posição Limites/X/Y para as anotações e muito mais no painel Propriedades.

Imprima o PDF sem modificações

Se quiser visualizar o PDF original, você pode ocultar as anotações usando o botão Ocultar e imprimir o PDF sem anotações.

Salve o PDF modificado com anotações no cliente

Clique no botão salvar para aplicar alterações ao seu PDF e salvar as anotações. O visualizador precisa estar conectado a um servidor executando DsPdf para salvar as alterações. A lista de alterações e o PDF original são enviados ao servidor, onde o DsPdf aplica as alterações. Em seguida, envia o PDF modificado de volta ao cliente, onde o usuário pode salvá-lo.

Editar conteúdo de um PDF

A opção Redigir anotação ou Redigir uma região na barra de ferramentas ajuda a marcar seções confidenciais para remoção. Você pode definir a cor da borda da marca e a cor do preenchimento da marca para permitir que os usuários marquem a área para redação. O usuário pode definir essas propriedades para serem aplicadas ao passar o mouse sobre o conteúdo redigido, ou seja, as propriedades Overlay Fill Color , Overlay Text , Overlay Text Align e Repeat Text . Todas essas opções aparecerão no seu PDF quando o conteúdo for removido do documento.

Você também pode editar conteúdo específico no botão Aplicar redação no painel Propriedades. Depois que a redação for aplicada, você poderá redefini-la usando o botão Redefinir redação na barra de ferramentas. No entanto, ao salvar o PDF, as informações editadas não estarão mais acessíveis e as redações aplicadas não poderão ser redefinidas.

Você pode aplicar anotações de redação individuais ou clicar no botão Aplicar todas as redações para aplicar as redações em todo o documento. Quando você salva o PDF com as redações aplicadas, o conteúdo redigido será totalmente removido do PDF. Os usuários não podem selecionar ou copiar o material removido para outro documento ou utilizar outras ferramentas PDF para ler o conteúdo editado.

Editor de formulário para visualizador de PDF JavaScript

Com o Editor de Formulários, agora você pode criar formulários PDF interativos online. O Editor irá ajudá-lo a usar vários campos de formulário e propriedades avançadas ao criar seus formulários. Você também pode preencher e enviar o formulário online .

Os recursos do Editor de Formulários incluem:

• Crie novos formulários PDF do zero
• Crie, preencha, envie e redefina formulários PDF
• Colete dados diretamente do usuário e preencha formulários PDF
• Preencha os dados nos campos do formulário de uma fonte externa (banco de dados, JSON , etc.)
• Adicione campos de formulário a documentos PDF existentes
• Edite campos de formulário em documentos PDF existentes
• Adicione funcionalidade JavaScript a formulários PDF
• Aplique uma ampla variedade de propriedades aos campos de formulário
• Barra de ferramentas de interface de usuário rápida e intuitiva e painel de propriedades para criar formulários PDF
• Crie uma interface de usuário personalizada – omita campos desnecessários na sua barra de ferramentas

A necessidade de um designer de formulários PDF baseado na Web

• O formato PDF é o formato preferido para layout e aparência. Portanto, embora os formulários HTML sejam populares, os formulários PDF sempre terão a aparência que você os projetou.

• A maioria dos aplicativos é baseada na web, e o Document Solutions PDF Viewer é uma ferramenta on-line completa para criar formulários PDF, editar PDFs, adicionar anotações e salvar o PDF modificado no cliente. É uma maneira mais rápida de gerar e manter PDFs em um único aplicativo.

• Os desenvolvedores podem criar um formulário PDF no Acrobat e compartilhá-lo online. No entanto, o PDF aberto no visualizador padrão do navegador não pode ser personalizado, nem os desenvolvedores podem usar ações JavaScript adicionais no formulário, como enviar o conteúdo ou preencher o conteúdo com dados do formulário. O Document Solutions PDF Viewer oferece suporte a outras ações JavaScript que você pode definir no formulário com as ações Enviar e Redefinir.

• Você pode usar o Microsoft Word para criar um formulário ou um editor de PDF. Criar um formulário PDF no Word pode ser um desafio, pois requer ferramentas de edição complexas. Um Designer de Formulários do Document Solutions PDF Viewer é intuitivo e inclui uma interface de usuário amigável e o painel Propriedades que define as propriedades desejadas nos campos do formulário.

• Você pode criar formulários PDF para visualização e preenchimento em qualquer navegador. Você também não precisa se preocupar com sua aparência ou se o usuário final possui o Adobe Acrobat.

Diferentes tipos de formulários PDF que você pode criar

Você pode criar os seguintes formulários PDF com o Form Designer:

• Formulários de inscrição (exemplos: evento, cursos universitários, adesão, histórico de pacientes, concursos, etc.)

• Formulários de candidatura (exemplos: candidatura a emprego, candidatura a empréstimo, etc.)

• Formulários de feedback (exemplos: eventos, site, e-commerce, etc.)

• Formulários de solicitação (exemplos: aluguel, informações, formulários de pagamento, etc.)

  
  

Principais recursos do criador de formulários PDF

O Document Solutions JavaScript PDF Viewer oferece suporte a vários tipos de campos de formulário que ajudarão a tornar seu PDF interativo e completo:

• Campo de texto - permite que os usuários insiram texto como nome, número de telefone, etc.
• Campo de senha – permite que os usuários insiram a senha de um documento
• Campo de área de texto - permite adicionar texto longo, como experiência profissional, endereço, etc.
• Campo CheckBox - Permite que seu usuário selecione várias opções
• Campo ComboText - Permite adicionar texto em posições igualmente espaçadas (por exemplo, inserir a data, e-mail, etc., em um formulário de registro)
• Campo ComboBox - Permite escolher um item em um menu pop-up ou digitar um valor
• Campo ListBox - Exibe uma lista de opções para seleção
• Campo PushButton - Um botão interativo que aciona ações específicas, como abrir arquivos individuais, exibir uma mensagem pop-up, etc.
• Campo RadioButton - Exibe um grupo de opções das quais o usuário pode selecionar apenas uma
• Campo do botão Enviar - Permite enviar o formulário preenchido
• Campo do botão Redefinir - permite redefinir o formulário

UI amigável para criar formulários PDF

As ferramentas do Document Solutions Form Editor possuem uma interface de usuário amigável para adicionar campos de formulário ao PDF. O PDF Viewer inclui uma barra de ferramentas e um editor de campos de formulário separados para adicionar campos de formulário, modificar as propriedades ou excluí-los do PDF existente. O painel Propriedade exibe uma lista de campos de formulário no seu documento. Você pode selecionar qualquer campo de formulário no PDF, aplicar propriedades específicas do campo de formulário no painel esquerdo e excluir o campo de formulário. Na guia Página do painel, você também pode ver quantos campos de formulário existem em sua página.

Adicionar, modificar e remover campos de formulários PDF novos ou existentes

A qualquer momento, ao criar um formulário PDF no visualizador online, você pode alterar os campos do formulário existentes e também removê-los. Para adicionar um campo de formulário, basta clicar no botão Editor de Formulário no painel esquerdo e você verá a barra de ferramentas do Editor de Formulário. Clique em qualquer campo do formulário e desenhe diretamente na página do PDF. Selecione o campo de formulário e você verá as propriedades do campo de formulário exibidas no painel esquerdo. Você também pode carregar um formulário PDF com campos de formulário existentes, selecionar o campo de formulário, aplicar propriedades ou escolher a opção Excluir no painel de propriedades para excluir o campo de formulário.

Aprimore o formulário PDF com propriedades específicas do campo do formulário

Há amplo suporte para definir propriedades específicas de campo de formulário para cada campo de formulário suportado pelo visualizador. Entre alguns recursos gerais, você pode definir Nome, Somente leitura, Valor, Alinhar, Cor de fundo, Comprimento máximo, Propriedades de borda, Tamanho da fonte e definir a posição Limites/X/Y dos campos do formulário.

Além disso, você pode definir a propriedade Obrigatório em campos de texto como TextField, PasswordField, TextArea e ComboText Field.

Imprima o formulário PDF original

Se quiser visualizar o arquivo PDF original, você pode ocultar os campos do formulário usando o botão Ocultar na barra de ferramentas principal e visualizar ou imprimir o arquivo PDF sem os campos do formulário.

Salve o PDF recém-projetado com campos de formulário no cliente

Aplique alterações ao seu documento PDF e salve os campos do formulário. Esta operação necessita de um produto DsPdf no servidor para obter o PDF original e a lista de alterações, aplicar as alterações e enviar o PDF modificado de volta ao cliente.

Preencher e enviar formulários PDF

Depois de criar o formulário PDF, você pode permitir que seus usuários preencham e enviem o formulário PDF ao visualizador. Os dados do formulário são enviados ao banco de dados ou gerados como PDF a partir dos valores preenchidos. Você também pode importar dados de formulário para um formulário PDF do banco de dados para o visualizador.

Opções adicionais de edição para visualizador de PDF

Além de anotações, redações e campos de formulário, você pode usar os seguintes recursos para trabalhar e editar documentos PDF.

Crie documentos PDF em branco

É possível usar o PDF Viewer para criar documentos PDF usando o botão Novo Documento . Você pode criar o PDF ou um formulário PDF por meio das ferramentas Anotação e Editor de formulário .

Adicionar novas páginas e excluir páginas em documentos PDF

Você pode adicionar uma nova página a um documento PDF existente ou a um documento PDF original usando o botão Nova página e usar o botão Excluir para excluir as páginas.

Selecionar e excluir anotações/campos de formulário de documentos PDF

Você pode selecionar os campos de anotação/formulário adicionados a um documento PDF na visualização Editor de anotações e Editor de formulário a qualquer momento. Use o botão Excluir para excluir anotações ou campos de formulário de documentos PDF novos ou existentes.

Desfazer e refazer alterações

Se quiser desfazer ou refazer alterações nas anotações ou nos campos do formulário, você pode usar os botões Desfazer/Refazer no Editor de Anotações e no Editor de Formulários. Esses botões registram suas alterações de forma incremental e você pode desfazer ou refazer suas ações até ficar satisfeito com o resultado.

Conclusão

Com isso, examinamos os recursos de anotações, redação e campos de formulário do Document Solutions JavaScript PDF Viewer. Como você viu, não poderia ser mais fácil adicionar suas próprias anotações, redigir informações que não deveriam ser exibidas e adicionar/editar campos de formulário para criar formulários PDF interativos.