Aspose.PDF Editor

Что такое HTML5 PDF Редактор от Aspose.PDF для .NET?

HTML5 PDF Редактор от Aspose.PDF для .NET - это редактор PDF с открытым исходным кодом для веба, который позволяет пользователям создавать, редактировать и конвертировать PDF файлы онлайн, а также легко интегрировать редактор в собственные веб-приложения для просмотра и редактирования PDF файлов. HTML5 PDF Редактор разработан с использованием HTML5, jQuery Ajax, ASP.NET, Bootstrap и бэкенд поддерживается Aspose.PDF для .NET. Интерфейс пользователя редактора сделан очень простым для легкого понимания и расширения функциональности в соответствии с требованиями пользователей.

Image

Функции

В настоящее время поддерживаются следующие функции:

  • Создание новых PDF файлов
  • Загрузка и просмотр PDF файлов
  • Загрузка PDF и изображений из Dropbox
  • Загрузка файлов PDF и изображений из Dropbox
  • Экспорт файла PDF в различные форматы файлов
  • Добавление или объединение файлов PDF
  • Вставка новых страниц
  • Удаление страниц
  • Перемещение страниц в файле PDF
  • Вставка текста в PDF
  • Выделение текста в PDF
  • Поворот вставленного текста в PDF
  • Поиск текста в PDF
  • Замена текста в PDF
  • Вставка изображений
  • Изменение размера подписей и изображений
  • Перетаскивание и позиционирование вставленных элементов
  • Загрузка файлов PDF с полями форм
  • Заполнение полей форм с помощью редактора
  • Сохранение и экспорт PDF с данными полей форм
  • Выделение необходимых полей форм
  • Добавление вложений в файлы PDF
  • Загрузка вложений из входного файла PDF
  • Скачивание файлов вложений
  • Удаление файлов вложений
  • Подписание PDF с помощью свободного рисования

Требования к системе

Поскольку HTML5 PDF Editor - это веб-приложение .NET, разработанное с использованием ASP.NET, C#, HTML5, jQuery, Javascript, вам потребуется следующее системное окружение для настройки HTML5 PDF Editor на вашем конце.

  • Visual Studio 2010 (или выше)
  • .NET Framework 3.5 (или выше)
  • Aspose.PDF для .NET
  • Aspose.PDF для .NET
  • jQuery 2.0.3
  • Bootstrap 3.2.0

Вы можете использовать любой из следующих браузеров для запуска приложения на вашем компьютере:

  • Mozilla Firefox (рекомендуется)
  • Internet Explorer (версия 9 или выше)
  • Google Chrome
  • Apple Safari

Поддержка

Мы, в Aspose, стремимся предоставлять наилучшую поддержку нашим клиентам / пользователям по их запросам любого характера, будь то технические или коммерческие. Пожалуйста, используйте приведенные ниже ссылки для любых запросов, связанных с лицензиями, продажами или техническими вопросами.

Руководство разработчика PDF редактора

Создание новых PDF файлов

Помимо редактирования существующих PDF документов, Html5 PDF Editor также поддерживает создание новых PDF файлов с нуля, что можно сделать, используя опцию “Создать новый файл” в меню. Используя эту функцию, вы можете создать пустой PDF в редакторе, добавить в него текст/изображения и сохранить в любом желаемом формате. В следующем разделе мы обсудим технические детали этой функции.

Как это работает?

HTML - элемент меню “Создать новый файл” нажат на странице

Когда вы нажимаете элемент меню “Создать новый файл”, вызывается метод onNewFileClicked в файле Editor.js. Когда вы нажимаете пункт меню “Создать новый файл”, вызывается метод onNewFileClicked в файле Editor.js.

jQuery - Отправка Ajax-запроса на сервер для метода CreateNewFile.

Смотрите вкладку Editor.js ниже для исходного кода метода onNewFileClicked, он вызывает метод CreateNewFile в файле CanvasSave.aspx.cs.

ASP.NET веб-метод обрабатывает запросы сервера

Смотрите вкладку Canvas.aspx.cs ниже с исходным кодом метода CreateNewFile. Он очищает все существующие данные о ранее загруженном файле с использованием метода ResetData.

Создание нового PDF-файла с использованием Aspose.PDF для .NET

После очистки данных с помощью метода ResetData, метод CreateNewFile создает новый PDF-файл с использованием класса Document из Aspose.PDF для .NET. Как вы можете видеть во вкладке ниже, объект Document генерирует файл с одной пустой страницей. После того как файл сгенерирован на сервере, файл конвертируется в изображение с использованием метода ImageConverter для загрузки на холст.

Загрузка результата файла на холст.

После того как файл преобразуется в изображение на сервере, управление возвращается к методу onNewFileClicked в файле Editor.js. После преобразования файла в изображение на стороне сервера, управление возвращается в метод onNewFileClicked в Editor.js.

Экспорт PDF в различные форматы файлов

HTML5 PDF Editor поддерживает экспорт PDF-файла в различные форматы файлов, что можно сделать, используя опцию Экспорт файла в строке меню. Используя эту функцию, вы можете экспортировать PDF-файл в нужный формат. В следующем разделе мы обсудим технические детали этой функции.

Как это работает?

HTML - Элемент меню “Экспортировать файл” нажат на странице.

Когда вы нажимаете элемент меню “Экспортировать файл”, вы можете выбрать формат экспорта из списка. После выбора формата экспорта вызывается метод “ExportFile” в файле Editor.js.

jQuery - Отправка Ajax-запроса на сервер для метода btnFileExport_Click

Смотрите вкладку Editor.js ниже для исходного кода метода “ExportFile”. Он отправляет запрос к серверному методу btnFileExport_Click с параметром формата файла в файле CanvasSave.aspx.cs.

ASP.NET веб-метод обрабатывает серверные запросы

Смотрите вкладку Canvas.aspx.cs ниже. Экспорт файла для скачивания в браузере клиента

После того, как файл сгенерирован на сервере, управление возвращается к методу ExportFile в Editor.js, откуда файл отправляется в браузер пользователя для скачивания с использованием метода ExportToBrowser.

Добавление или объединение PDF файлов

Html5 PDF Editor поддерживает добавление или объединение PDF файлов, что вы можете сделать, используя опцию Append File из меню. Используя эту функцию, вы можете добавить PDF файл к вашему исходному файлу. В следующем разделе мы обсудим технические детали этой функции.

Как это работает?

HTML - На странице нажата опция меню “Append File”.

Когда вы нажимаете на опцию меню “Append File”, вы можете загрузить файл с помощью диалога загрузки файлов. После загрузки файла вызывается метод “fileSelected” в файле Editor.js.

jQuery - Отправить запрос на сервер для метода ProcessRequest

См. вкладку Editor.js ниже для исходного кода метода “fileSelected”. См. вкладку Editor.js для исходного кода метода “fileSelected”.

Метод веб-приложения ASP.NET обрабатывает серверные запросы

См. вкладку Canvas.aspx.cs ниже. В зависимости от переданного параметра формы, файл для добавления сохраняется на сервере и вызывается метод “AppendFile”. Метод AppendFile добавляет загруженный файл с использованием Aspose.PDF для .NET, конвертирует полученный файл в изображение и возвращает управление методу “fileSelected” в Editor.js

Обновление содержимого холста после добавления файла

После того как файл сгенерирован на сервере, управление возвращается методу “fileSeleceted” в Editor.js, который обновляет содержимое редактора.

Загрузка локального PDF файла

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

Как это работает?

HTML - на странице нажимается пункт меню “Открыть с компьютера”. HTML - “Открыть с компьютера” элемент меню нажат на странице.

Когда вы нажимаете элемент меню “Открыть с компьютера”, вы можете загрузить входной файл с помощью диалога загрузки файлов. После загрузки файла вызывается метод “fileSelected” в файле Editor.js.

jQuery - Отправка серверного запроса на метод ProcessRequest

Смотрите вкладку Editor.js ниже для исходного кода метода “fileSelected”. Файл отправляется на сервер, и метод “ProcessRequest” вызывается в файле CanvasSave.aspx.cs.

ASP.NET веб-метод обрабатывает серверные запросы

Смотрите вкладку Canvas.aspx.cs ниже. В зависимости от переданного параметра формы, загружаемый файл сохраняется на сервере, данные сбрасываются с помощью метода “ResetData” и вызывается метод “ImageConverter”. Метод ImageConverter конвертирует загруженный файл в изображения с использованием Aspose.PDF для .NET и возвращает управление методу “fileSelected” в Editor.js.

Обновление содержимого холста после загрузки файла

После того как файл сгенерирован на сервере, управление возвращается методу “fileSelected” в Editor.js, который обновляет содержимое редактора, т.е. После того, как файл создан на сервере, управление возвращается в метод “fileSeleceted” в Editor.js, который обновляет содержимое редактора.

Добавление страницы в PDF-файл

Используя Html5 PDF Editor, вы можете добавлять новые страницы в PDF-файлы, используя опцию “Добавить страницу” в меню. С помощью этой функции вы можете добавить пустую страницу в ваш PDF-файл. В следующем разделе мы обсудим технические детали этой функции.

Как это работает?

HTML - нажата кнопка меню “Добавить страницу”

Когда вы нажимаете на пункт меню “Добавить страницу”, вызывается метод “AddPage” в файле Editor.js.

jQuery - Отправить Ajax-запрос на сервер для метода AddPage_Click.

Смотрите вкладку Editor.js ниже для исходного кода метода AddPage, он вызывает метод AddPage_Click в файле CanvasSave.aspx.cs.

ASP.NET web метод обрабатывает запросы сервера

Смотрите вкладку Canvas.aspx.cs ниже с исходным кодом метода AddPage_Click.

Удаление страницы из PDF-файла

Используя Html5 PDF Editor, вы можете удалить страницу из PDF-файлов, используя опцию “Удалить страницу” в строке меню. В следующем разделе мы обсудим технические детали этой функции.

Как это работает?

HTML - Нажатие на элемент меню “Удалить страницу”

При нажатии на элемент меню “Удалить страницу” вызывается метод DeletePage в файле Editor.js.

jQuery - Отправка Ajax-запроса на сервер для метода DeletePage_Click.

Смотрите вкладку Editor.js ниже для исходного кода метода DeletePage, он вызывает метод DeletePage_Click в файле CanvasSave.aspx.cs.

ASP.NET web метод обрабатывает запросы сервера

Смотрите вкладку Canvas.aspx.cs ниже с исходным кодом метода DeletePage_Click. Он удаляет выбранную страницу из PDF-файла, используя метод Delete коллекции Aspose.PDF.Document.Page.

Обновление редактируемого содержимого

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

Перемещение страниц в PDF-файле

Используя Html5 PDF Editor, вы можете перемещать страницы в PDF-файлах, используя опцию “Переместить страницу” в строке меню. Как только вы нажмете на пункт меню “Переместить страницу”, появится диалоговое окно для указания нового местоположения выбранной страницы. В следующем разделе мы обсудим технические детали этой функции.

Как это работает?

HTML - Нажатие на пункт меню “Переместить страницу”

Когда вы нажимаете на пункт меню “Переместить страницу”, отображается диалоговое окно для получения нового местоположения выбранной страницы. После указания номера страницы и нажатия кнопки “Переместить”, вызывается метод “Move” в файле Editor.js.

jQuery - Отправка Ajax-запроса на сервер для метода MovePages.

Смотрите вкладку Editor.js ниже для исходного кода метода Move, который вызывает метод MovePage и передает детали вроде перемещения с, перемещения на, список страниц методу MovePages в файле CanvasSave.aspx.cs. Обработка серверных запросов методом веб-сервиса ASP.NET

Смотрите вкладку Canvas.aspx.cs ниже с исходным кодом метода MovePages. Он использует коллекцию Aspose.PDF.Document.Pages для перемещения страниц.

Обновление редактируемого содержимого

После перемещения страницы управление возвращается обратно к методу MovePage в файле Editor.js, который обновляет индексы страниц и информацию, связанную с различными коллекциями в редакторе, используя метод MoveUpdate.

Вставка текста в файл PDF

Используя Html5 PDF Editor, вы можете вставить текст в файлы PDF, выбрав опцию Text Mode в строке меню. После выбора пункта меню Text Mode и нажатия на любое место в редакторе, где вы хотите добавить текст, перед вами появится диалоговое окно для ввода и форматирования желаемого текста, как показано ниже:

В следующем разделе мы обсудим технические детали, стоящие за этой функцией. В следующем разделе мы обсудим технические детали этой функции.

Как это работает?

HTML - Пункт меню “Текстовый режим” выбран на странице

Когда вы выбираете пункт меню “Текстовый режим” и кликаете на желаемое место в редакторе для вставки текста в PDF-файл, отображается диалоговое окно для ввода текста, который нужно вставить на страницу. После ввода текста и нажатия кнопки “OK”, вызывается метод “saveTextFromArea” в файле Editor.js.

Javascript - Получение введенного текста из диалогового окна и его отображение в редакторе.

См. вкладку Editor.js ниже для исходного кода метода saveTextFromArea, который получает текст из диалогового окна и отображает его в редакторе. Также он сохраняет данные в коллекции форм, которая позже используется на серверной стороне для вставки текста в PDF-файл. Вы можете проверить исходный код метода saveFile, который вызывается при сохранении файла.

ASP.NET web метод обрабатывает серверные запросы

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

Выделение текста в PDF-файле

Используя Html5 PDF Editor, вы можете выделить текст в PDF-файлах, используя опцию “Режим выделения” в строке меню. После выбора пункта меню “Режим выделения” вы можете выделить любой текст и область с помощью прямоугольного инструмента выделения. В следующем разделе мы обсудим технические детали этой функции.

Как это работает?

HTML - пункт меню “Режим выделения” выбран на странице

Когда вы выбираете пункт меню “Режим выделения”, вы можете нарисовать прямоугольное выделение вокруг любого текста или элемента в вашем PDF-файле. Реализацию этого процесса можно увидеть в методе “tools.rect” в файле Editor.js.

Javascript - Рисование прямоугольника выделения в редакторе.

Смотрите вкладку Editor.js ниже для исходного кода метода tool.rect, который позволяет пользователю рисовать прямоугольник выделения в любом месте редактора. Смотрите вкладку Editor.js ниже с исходным кодом метода tool.rect, который позволяет пользователю рисовать выделенный прямоугольник в любом месте редактора.

Метод веб-приложения ASP.NET обрабатывает серверные запросы

Как упоминалось выше, выделение на самом деле вставляется в наш исходный PDF-файл при выполнении операции сохранения, которая использует метод GetImageStamp для вставки печати изображения в исходный PDF-файл в указанном месте редактора. Смотрите вкладку Canvas.aspx.cs ниже с исходным кодом метода GetImageStamp. Он использует класс Aspose.PDF.ImageStamp для вставки выделенного прямоугольника в PDF-файл.

Поиск текста в PDF-файле

Используя Html5 PDF Editor, вы можете искать текст в PDF-файлах, используя опцию “Поиск текста” в строке меню. После того как вы выберете пункт меню “Поиск текста”, вам будет представлено диалоговое окно для ввода текста, который нужно искать, как показано ниже:

После ввода текста и нажатия на поиск все вхождения искомого слова будут выделены, как показано ниже:

Как это работает?

HTML - На странице нажимается пункт меню “Поиск текста” HTML - Пункт меню “Поиск текста” нажат на странице

При нажатии на пункт меню “Поиск текста” появляется диалоговое окно для ввода текста, который вы хотите найти. После ввода текста и нажатия кнопки поиска вызывается метод “Move”, который проверяет, выполняется ли операция перехода на страницу или операция поиска, а затем вызывает метод performSearch в файле Editor.js.

jQuery - Отправка Ajax-запроса на сервер для метода SearchData

Смотрите вкладку Editor.js ниже для исходного кода метода performSearch, который получает введенный текст и запрос к серверному методу SearchData в файле CanvasSave.aspx.cs.

ASP.NET web метод обрабатывает серверные запросы

Смотрите вкладку Canvas.aspx.cs ниже. Посмотрите вкладку Canvas.aspx.cs ниже.

Замена текста в файле PDF

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

Как это работает?

HTML - выбран пункт меню “Замена текста”

Когда вы нажимаете на пункт меню “Замена текста”, перед вами появляется диалоговое окно для ввода текста для поиска и замены. После ввода текста и нажатия на кнопку Заменить вызывается метод “ReplaceText” в файле Editor.js.

jQuery - отправка серверного запроса Ajax для метода ReplaceText

Посмотрите вкладку Editor.js ниже для исходного кода метода ReplaceText, который получает входной текст из диалога ввода текста и запрос к серверному методу ReplaceText в файле CanvasSave.aspx.cs.

ASP.NET web метод обрабатывает серверные запросы

Посмотрите вкладку Canvas.aspx.cs ниже.

Загрузка PDF-файла с полями формы

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

Как это работает?

HTML - элемент меню “Открыть с компьютера” нажат на странице.

Когда вы нажимаете элемент меню “Открыть с компьютера”, вы можете загрузить входной файл, содержащий поля формы, используя диалоговое окно загрузки файла. После загрузки файла вызывается метод “fileSelected” в файле Editor.js.

jQuery - отправка запроса на сервер для метода ProcessRequest

Файл отправляется на сервер, и вызывается метод “ProcessRequest” в файле CanvasSave.aspx.cs.

ASP.NET веб-метод обрабатывает запросы сервера

Смотрите вкладку Canvas.aspx.cs ниже. См. вкладку Canvas.aspx.cs ниже.

Загрузка полей формы на холст

См. вкладку Editor.js ниже, метод manageFields в Editor.js используется для генерации всех полей на холсте на основе информации, полученной с серверной стороны. Он рисует элементы управления полями HTML, используя информацию о типе и расположении с серверной стороны на холсте.

Выделение обязательных полей формы

Используя Html5 PDF Editor, вы можете выделить обязательные поля формы в редакторе. Как только файл с полями формы загружен в редактор, все обязательные поля формы выделяются для пользователей, чтобы помочь в редактировании. В следующем разделе мы обсудим технические детали этой функции.

Как это работает?

HTML - Нажата кнопка “Открыть с компьютера” на странице.

Когда вы нажимаете элемент меню “Открыть с компьютера”, вы можете загрузить входной файл с полями формы, используя диалоговое окно загрузки файлов. После загрузки файла вызывается метод “fileSelected” в файле Editor.js.

jQuery - Отправить запрос на сервер для метода ProcessRequest jQuery - Отправка запроса на сервер для метода ProcessRequest

Файл отправляется на сервер, и вызывается метод “ProcessRequest” в файле CanvasSave.aspx.cs.

ASP.NET веб-метод обрабатывает запросы сервера

Смотрите вкладку Canvas.aspx.cs ниже. Основываясь на переданном параметре формы, загружаемый файл сохраняется на сервере, метод ImageConverter конвертирует загруженный файл в изображения, и вызывается метод “CheckFields”, который использует класс Aspose.PDF.InteractiveFeatures.Forms для проверки всех полей формы и сбора информации о полях, такой как ТипПоля, Расположение и т.д.. После получения деталей всех полей формы, мы получаем информацию о том, требуется ли поле формы, используя метод Aspose.PDF.Facades.IsRequiredField, и возвращаем коллекцию полей обратно методу ImageConverter. Метод ImageConverter возвращает управление методу “fileSelected” в Editor.js

Загрузка полей формы на холст

Смотрите вкладку Editor.js ниже, метод manageFields в Editor.js используется для генерации всех полей на холсте на основе информации, отправленной с серверной стороны. Просмотрите вкладку Editor.js ниже, метод manageFields в Editor.js используется для генерации всех полей на холсте на основе информации, полученной от сервера.

Рендеринг WebForms DataGridView в PDF