paint-brush
Как добавить инструменты аннотаций, редактирования и редактора форм в средство просмотра PDF-файлов на JavaScriptк@mesciusinc
142 чтения

Как добавить инструменты аннотаций, редактирования и редактора форм в средство просмотра PDF-файлов на JavaScript

к MESCIUS inc.11m2024/06/27
Read on Terminal Reader

Слишком долго; Читать

Узнайте, как добавлять аннотации PDF, применять исправления и использовать инструменты редактирования PDF-форм с помощью средства просмотра PDF-файлов на JavaScript.
featured image - Как добавить инструменты аннотаций, редактирования и редактора форм в средство просмотра PDF-файлов на JavaScript
MESCIUS inc. HackerNoon profile picture

Поскольку все больше бизнес-приложений перемещаются в веб-среду, имеет смысл, чтобы такие функции, как совместное использование и редактирование документов, также переносились в браузер. Однако во многих ситуациях пользователям потребуется сделать больше, чем просто просмотреть PDF-документ.


Им может потребоваться добавить аннотации для предоставления дополнительной информации, удалить личную информацию из документа или даже заполнить поля формы в документе. К счастью, Document Solutions JavaScript PDF Viewer упрощает добавление этой функции в ваше приложение JavaScript .


В этой статье мы рассмотрим следующие функции Document Solutions JavaScript PDF Viewer:


  • Редактор аннотаций для JavaScript PDF Viewer

  • Ключевые особенности аннотаций

  • Редактировать контент из PDF-файла

  • Редактор форм для просмотра PDF-файлов на JavaScript

  • Ключевые особенности редактора форм

  • Дополнительные возможности редактирования для PDF Viewer


Теперь давайте посмотрим на эти особенности.

Редактор аннотаций для JavaScript PDF Viewer

Инструменты аннотаций в Document Solutions JavaScript PDF Viewer помогут пользователям просматривать и отмечать важную информацию в своих PDF-документах. Они также смогут добавлять, изменять и удалять аннотации из существующих PDF-документов, сохраняя при этом исходное содержимое.


Пользователи могут делать аннотации в PDF-файле, комментировать и отвечать на комментарии друг друга. Благодаря возможности скрывать аннотации пользователи могут легко просматривать и распечатывать исходные документы, а при необходимости они также могут распечатывать копии, содержащие их аннотации. Редактор аннотаций перечисляет все аннотации в вашем документе, что позволяет вам получать доступ к существующим аннотациям и изменять их:


Редактор аннотаций

Варианты использования и преимущества

Обычно пользователи полагаются на Adobe Acrobat для аннотирования PDF-файлов. Благодаря средству просмотра, включающему функции редактирования, ваши пользователи могут комментировать свои документы прямо в приложении без необходимости переключаться между приложениями. Как видите, программа просмотра, включающая возможности редактирования, может значительно упростить рабочий процесс бизнеса.


Вот лишь несколько примеров, где эта функциональность может оказаться полезной:


  • Сотрудник компании хочет отправить финансовые отчеты руководству на рассмотрение. Руководство может открывать отчеты онлайн в программе просмотра PDF-файлов, использовать аннотации, чтобы предлагать изменения, и сообщать сотруднику о наличии комментариев. Затем сотрудник может открыть документ в онлайн-редакторе и обновить его во вьювере, используя сделанные аннотации.


  • Сотрудник сомневается в структуре заработной платы в своей компании. Они могут читать документы в программе просмотра PDF-файлов, редактировать конфиденциальную информацию и отмечать области, требующие уточнения, с помощью инструментов аннотаций.


  • Дизайнер веб-сайта готовит скриншоты веб-сайта и объединяет их в PDF-файл для отправки на проверку. Рецензенты отмечают области, требующие изменений, с помощью инструментов аннотаций.


Инструменты аннотирования в Document Solutions JavaScript PDF Viewer делают все эти сценарии возможными. Давайте рассмотрим функции, включенные в аннотации.

Ключевые особенности аннотаций

Следующие ключевые функции доступны с аннотациями:


  • Редактируйте PDF-файлы с помощью различных аннотаций
  • Отмечайте важную информацию через удобный пользовательский интерфейс
  • Добавляйте, изменяйте и удаляйте аннотации из новых и существующих PDF-файлов
  • Улучшите содержимое PDF и примените свойства, специфичные для аннотаций
  • Распечатайте исходный PDF-файл без изменений
  • Сохраните измененный PDF-файл с аннотациями на клиенте.

Редактируйте PDF-файлы с помощью различных аннотаций

Document Solutions PDF Viewer поддерживает все аннотации, необходимые для просмотра PDF-документов. Вы можете добавить следующее:


  • Текстовые аннотации (заметки) — добавляет текст или заметки в PDF-файл.
  • Произвольная текстовая аннотация — добавляет примечание, которое всегда видно в PDF-файле.
  • Рукописная аннотация — рисует рукописные рисунки в PDF-файле.
  • Квадратная аннотация: добавляет в PDF-файл прямоугольную/квадратную форму.
  • Круговая аннотация: добавляет в PDF-файл форму круга.
  • Линейная аннотация: добавляет прямую линию в PDF-файл.
  • Полилинейная аннотация: добавляет в PDF-файл закрытые или открытые фигуры с несколькими краями.
  • Аннотация к многоугольнику: добавляет многоугольник в PDF-файл.
  • Аннотация к вложению файла — прикрепите файл к документу, который будет встроен в PDF.
  • Звуковая аннотация — добавляет звук (формат .au, .aiff или .wav), импортированный из файла или записанный с микрофона компьютера.
  • Аннотация ссылки — добавляет ссылки, которые могут ссылаться на разные веб-страницы, вызывать поисковые системы и выполнять JavaScript.
  • Штамп-аннотации. Используйте изображения локально или с сервера в качестве аннотаций в PDF-файле.

Отмечайте важную информацию с помощью удобного пользовательского интерфейса

Инструменты аннотирования Document Solutions PDF Viewer имеют интуитивно понятный пользовательский интерфейс, который позволяет пользователям рисовать аннотации в PDF-файле. Средство просмотра PDF-файлов включает отдельную панель инструментов и редактор аннотаций для добавления аннотаций, изменения их свойств или удаления аннотаций из существующего PDF-файла.


На панели «Свойства» отображается список аннотаций в документе. Вы можете выбрать любую аннотацию в PDF-файле, применить свойства аннотации на левой панели или удалить аннотацию.


На вкладке «Страница» панели вы можете увидеть, сколько аннотаций существует на вашей странице. Отправляя документ на проверку, вы можете определить количество внесенных изменений.


Панель свойств

Добавляйте, изменяйте и удаляйте аннотации из новых и существующих PDF-файлов

Вы можете редактировать существующие аннотации или удалять их в любой момент при просмотре PDF-файлов в средстве просмотра PDF-файлов JavaScript. Чтобы добавить аннотацию, просто нажмите кнопку «Редактор аннотаций» на левой панели, и вы увидите панель инструментов аннотаций . Нажмите на любую аннотацию и начните рисовать прямо в PDF-файле. Выберите аннотацию, и вы увидите свойства аннотации, отображаемые на левой панели. Вы также можете загрузить PDF-файл с существующими аннотациями, выбрать аннотацию, изменить свойства или удалить аннотацию с панели свойств.


Добавляйте, изменяйте и удаляйте аннотации

Улучшите содержимое PDF и примените свойства, специфичные для аннотаций

Пользователи найдут обширную поддержку для настройки свойств аннотаций в средстве просмотра. На панели свойств вы можете добавить форматированный текст, установить цвет текста, добавить рамку, указать автора и тему, добавить ответ, установить положение границ/X/Y для аннотаций и многое другое.


Применить свойства, специфичные для аннотации

Распечатайте PDF без изменений

Если вы хотите просмотреть исходный PDF-файл, вы можете скрыть аннотации с помощью кнопки «Скрыть» и распечатать PDF-файл без аннотаций.


Скрыть аннотации в программе просмотра PDF-файлов JavaScript

Сохраните измененный PDF-файл с аннотациями на клиенте.

Нажмите кнопку «Сохранить», чтобы применить изменения к PDF-файлу и сохранить аннотации. Чтобы сохранить изменения, средство просмотра должно быть подключено к серверу, на котором работает DsPdf . Список изменений и исходный PDF-файл отправляются на сервер, где DsPdf применяет изменения. Затем он отправляет измененный PDF-файл обратно клиенту, где пользователь может его сохранить.


Сохраните измененный PDF-файл с аннотациями.

Редактировать контент из PDF-файла

Параметр «Редактировать аннотацию» или «Редактировать область» на панели инструментов помогает пометить конфиденциальные разделы для удаления. Вы можете установить Цвет границы отметки и Цвет заливки отметки, чтобы пользователи могли отмечать область для редактирования. Пользователь может настроить эти свойства для применения при наведении курсора на отредактированное содержимое, т. е. свойства «Цвет заливки наложения» , «Наложение текста» , «Выравнивание наложения текста» и «Повторить текст» . Все эти параметры появятся в вашем PDF-файле, когда содержимое будет удалено из документа.


Вы также можете отредактировать определенный контент, нажав кнопку «Применить редактирование» на панели «Свойства». После применения редактирования вы можете сбросить его с помощью кнопки «Сбросить редактирование» на панели инструментов. Однако при сохранении PDF-файла отредактированная информация больше не доступна, а примененные исправления невозможно сбросить.


Вы можете применить отдельные аннотации к исправлениям или нажать кнопку «Применить все исправления» , чтобы применить исправления ко всему документу. При сохранении PDF-файла с примененными исправлениями отредактированное содержимое будет полностью удалено из PDF-файла. Пользователи не могут выбирать или копировать удаленный материал в другой документ или использовать другие инструменты PDF для чтения отредактированного содержимого.


Редактировать PDF-контент

Редактор форм для просмотра PDF-файлов на JavaScript

С помощью редактора форм теперь вы можете создавать интерактивные PDF-формы онлайн. Редактор поможет вам использовать различные поля формы и дополнительные свойства при создании форм. Вы также можете заполнить и отправить форму онлайн .


Возможности редактора форм включают в себя:


  • Создавайте новые PDF-формы с нуля
  • Создавайте, заполняйте, отправляйте и сбрасывайте PDF-формы.
  • Собирайте данные непосредственно от пользователя и заполняйте PDF-формы.
  • Заполните данные в поля формы из внешнего источника (база данных, JSON и т.д.)
  • Добавьте поля формы в существующие PDF-документы
  • Редактировать поля формы в существующих PDF-документах
  • Добавьте функциональность JavaScript в формы PDF
  • Применение широкого спектра свойств для формирования полей
  • Быстрая, интуитивно понятная панель инструментов пользовательского интерфейса и панель свойств для создания PDF-форм.
  • Создайте собственный пользовательский интерфейс — исключите ненужные поля на панели инструментов.

Потребность в веб-конструкторе PDF-форм

  • Формат PDF является наиболее предпочтительным форматом для макета и внешнего вида. Таким образом, несмотря на популярность HTML-форм , PDF-формы всегда будут выглядеть так, как вы их разработали.


  • Большинство приложений являются веб-приложениями, а Document Solutions PDF Viewer — это универсальный онлайн-инструмент для создания PDF-форм, редактирования PDF-файлов, добавления аннотаций и сохранения измененного PDF-файла на клиенте. Это более быстрый способ создания и хранения PDF-файлов в одном приложении.


  • Разработчики могут создать PDF-форму в Acrobat и поделиться ею в Интернете. Однако PDF-файл, открытый в средстве просмотра по умолчанию в браузере, нельзя настроить, а разработчики не могут использовать дополнительные действия JavaScript в форме, такие как отправка содержимого или заполнение содержимого данными формы. Document Solutions PDF Viewer поддерживает дополнительные действия JavaScript, которые вы можете установить в форме с помощью действий «Отправить» и «Сбросить».


  • Вы можете использовать Microsoft Word для создания формы или использовать редактор PDF. Создание формы PDF в Word может оказаться сложной задачей, поскольку для этого требуются сложные инструменты редактирования. Конструктор форм Document Solutions PDF Viewer интуитивно понятен и включает в себя удобный пользовательский интерфейс и панель свойств, которая устанавливает нужные свойства в полях формы.


  • Вы можете создавать PDF-формы для просмотра и заполнения в любом браузере. Вам также не придется беспокоиться о его внешнем виде или о том, есть ли у конечного пользователя Adobe Acrobat.

Различные типы PDF-форм, которые вы можете создать

С помощью Конструктора форм можно создавать следующие PDF-формы:


  • Регистрационные формы (примеры: мероприятие, университетские курсы, членство, история болезни, конкурсы и т. д.)

  • Формы заявлений (примеры: заявление о приеме на работу, заявление на получение кредита и т. д.)

  • Формы обратной связи (примеры: мероприятия, веб-сайт, электронная коммерция и т. д.)

  • Формы запросов (примеры: аренда, информация, формы оплаты и т. д.)


Редактор PDF-форм JavaScript

Ключевые особенности конструктора PDF-форм

Document Solutions JavaScript PDF Viewer поддерживает несколько типов полей формы, которые помогут сделать ваш PDF-файл интерактивным и полным:


  • Текстовое поле. Позволяет пользователям вводить текст, например имя, номер телефона и т. д.
  • Поле пароля — позволяет пользователям вводить пароль для документа.
  • Поле текстовой области: позволяет добавлять длинный текст, например опыт работы, адрес и т. д.
  • Поле CheckBox — позволяет пользователю выбрать несколько вариантов.
  • Поле ComboText — позволяет добавлять текст на равном расстоянии друг от друга (например, ввод даты, адреса электронной почты и т. д. в регистрационной форме).
  • Поле со списком. Позволяет выбрать элемент из всплывающего меню или ввести значение.
  • Поле ListBox — отображает список опций для выбора.
  • Поле PushButton — интерактивная кнопка, запускающая определенные действия, например открытие отдельных файлов, отображение всплывающего сообщения и т. д.
  • Поле RadioButton — отображает группу опций, из которых пользователь может выбрать только одну.
  • Поле кнопки «Отправить» — позволяет отправить заполненную форму.
  • Поле кнопки сброса — позволяет сбросить форму.

Удобный пользовательский интерфейс для создания PDF-форм

Инструменты редактора форм Document Solutions имеют удобный пользовательский интерфейс для добавления полей формы в PDF-файл. Средство просмотра PDF включает в себя отдельную панель инструментов и редактор полей формы , позволяющие добавлять поля формы, изменять свойства или удалять их из существующего PDF-файла. На панели свойств отображается список полей формы в документе. Вы можете выбрать любое поле формы в PDF-файле, применить свойства, специфичные для поля формы, на левой панели и удалить поле формы. На вкладке «Страница» панели вы также можете увидеть, сколько полей формы существует на вашей странице.


Панель инструментов и редактор полей формы

Добавление, изменение и удаление полей формы из новых или существующих PDF-форм

В любой момент при создании PDF-формы в онлайн-просмотре вы можете изменить существующие поля формы, а также удалить их. Чтобы добавить поле формы, просто нажмите кнопку «Редактор форм» на левой панели, и вы увидите панель инструментов редактора форм. Нажмите на любое поле формы и рисуйте прямо на странице PDF. Выберите поле формы, и вы увидите свойства поля формы, отображаемые на левой панели. Вы также можете загрузить форму PDF с существующими полями формы, выбрать поле формы, применить свойства или выбрать параметр «Удалить» на панели свойств, чтобы удалить поле формы.

Добавление, изменение и удаление полей формы

Улучшите форму PDF с помощью свойств, специфичных для полей формы

Существует обширная поддержка настройки свойств полей формы для каждого поля формы, поддерживаемого средством просмотра. Среди нескольких общих функций вы можете установить имя, только для чтения, значение, выравнивание, фоновый цвет, максимальную длину, свойства границы, размер шрифта и установить положение границ/X/Y полей формы.


Кроме того, вы можете установить свойство Required для текстовых полей, таких как TextField, PasswordField, TextArea и ComboText Field.


Улучшите форму PDF с помощью свойств, специфичных для полей формы

Распечатайте оригинальную PDF-форму

Если вы хотите просмотреть исходный PDF-файл, вы можете скрыть поля формы с помощью кнопки «Скрыть» на главной панели инструментов и просмотреть или распечатать PDF-файл без полей формы.


Скрыть поля формы

Сохраните новый PDF-файл с полями формы на клиенте.

Примените изменения к PDF-документу и сохраните поля формы. Для этой операции требуется продукт DsPdf на сервере, чтобы получить исходный PDF-файл и список изменений, применить изменения и отправить измененный PDF-файл обратно клиенту.

Заполните и отправьте PDF-формы

После разработки PDF-формы вы можете позволить пользователям заполнять и отправлять PDF-форму в программу просмотра. Данные формы либо отправляются в базу данных, либо генерируются в виде PDF-файла на основе заполненных значений. Вы также можете импортировать данные формы в форму PDF из базы данных в программу просмотра.


Заполните и отправьте PDF-формы

Дополнительные возможности редактирования для PDF Viewer

Помимо аннотаций, исправлений и полей форм, вы можете использовать следующие функции для работы и редактирования PDF-документов.

Создание пустых PDF-документов

Можно использовать PDF Viewer для создания PDF-документов с помощью кнопки «Новый документ» . Вы можете создать PDF-файл или форму PDF с помощью инструментов «Аннотации» и «Редактор форм» .


Создание пустых PDF-документов с помощью JavaScript PDF Viewer

Добавление новых страниц и удаление страниц в PDF-документах

Вы можете добавить новую страницу в существующий PDF-документ или исходный PDF-документ с помощью кнопки «Новая страница» и использовать кнопку «Удалить» , чтобы удалить страницы.


Добавление новых страниц и удаление страниц в PDF-документах

Выбор и удаление аннотаций/полей формы из PDF-документов

Вы можете в любой момент выбрать поля аннотаций/форм, добавленные в PDF-документ, в представлениях «Редактор аннотаций» и «Редактор форм». Используйте кнопку «Удалить» , чтобы удалить аннотации или поля формы из новых или существующих PDF-документов.


Удаление аннотаций/полей формы из PDF-документов

Отменить и повторить изменения

Если вы хотите отменить или повторить изменения в аннотациях или полях формы, вы можете использовать кнопки «Отменить/Повторить» как в редакторе аннотаций, так и в редакторе форм. Эти кнопки постепенно записывают ваши изменения, и вы можете продолжать отменять или повторять свои действия, пока не будете удовлетворены результатом.


Отменить и повторить изменения в PDF

Заключение

При этом мы рассмотрели функции аннотаций, редактирования и полей форм в Document Solutions JavaScript PDF Viewer. Как вы видели, нет ничего проще, чем добавлять свои собственные аннотации, редактировать информацию, которая не должна отображаться, а также добавлять/редактировать поля формы для создания интерактивных форм PDF.