Как создать средство просмотра PDF файлов с помощью JavaScript пошаговое руководство


Содержание материала:

Как создать средство просмотра PDF файлов с помощью JavaScript: пошаговое руководство

Группа: Главные администраторы
Сообщений: 14349
Регистрация: 12.10.2007
Из: Twilight Zone
Пользователь №: 1

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

Любое ПО содержит некоторый активно используемый функционал и значительную долю редко используемого функционала. Можно прикинуть, все ли возможности операционной системы (или Microsoft Word, или своей IDE) мы используем в повседневной работе или вообще использовали хоть раз в жизни. Как правило, далеко не все.

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

Javascript в PDF чаще всего применяется для следующих задач:

  • Для изменения содержимого документа в зависимости от некоторых событий. Например, скрыть часть документа при отправке на печать. Или при открытии документа автоматически заполнить часть полей формы.
  • Для ограничения действий читателя. Например, для валидации вводимых значений при заполнении форм.

Чтобы просмотрщики PDF могли интерпретировать Javascript код, определен специальный Javascript API. Изначально API был разработан только для семейства продуктов Adobe Acrobat, но альтернативные просмотрщики, как правило, также поддерживают некоторое базовое подмножество данного API.

Рассмотрим ряд практических примеров использования Javascript в PDF документах.

Начнем рассмотрение темы с традиционного Hello World примера. В данном и последующих примерах используется язык C# и библиотека Docotic.Pdf для работы с PDF документами. Ссылка на исходники с кодом всех примеров приводится в конце статьи.

namespace JavascriptInPdf
<
public static class Demo
<
public static void Main(string[] args)
<
PdfDocument pdf = new PdfDocument();

pdf.OnOpenDocument = pdf.CreateJavaScriptAction(«app.alert(«Привет, Хабр!», 3);»);

Если открыть созданный этим кодом документ в Adobe Reader, то увидим примерно следующее:

Что же происходит в примере? Суть заключена в строке

pdf.OnOpenDocument = pdf.CreateJavaScriptAction(«app.alert(«Привет, Хабр!», 3);»);

Формат PDF включает поддержку actions – это действия, происходящие по тому или иному событию. Например, когда в оглавлении в некотором PDF документе кликаем на ссылку с номером страницы – срабатывает определенный action для перехода на соответствующую страницу:

Для Javascript также есть соответствующий action. Мы создаем его с помощью метода PdfDocument.CreateJavaScriptAction, которому передаем в качестве параметра JS код. Созданный action мы привязываем к событию OnOpenDocument, происходящему при открытии документа просмотрщиком.

Непосредственно Javascript код выглядит так:

app.alert(«Привет, Хабр!», 3);

Статический класс app является частью Javascript API и предоставляет набор методов для взаимодействия с приложением-просмотрщиком. В частности, он содержит несколько перегрузок метода alert для показа модального диалога с сообщением. В данном примере используется перегрузка со вторым необязательным параметром – индексом иконки диалога, значение 3 соответствует Status Icon.

От простого – к сложному

Рассмотрим более реалистичный пример.

Многие PDF документы описывают некоторые формы для заполнения – это может быть договор открытия банковского вклада, анкета на получение визы или загран. паспорта, заявление на отпуск и т.п. Довольно удобно, поскольку такую форму можно заполнить прямо в просмотрщике и сохранить или распечатать. Авторы PDF документов, содержащих формы, могут облегчить пользователю их заполнение с помощью Javascript.

Реальные документы часто содержат поля для ввода даты заполнения. Например, это может выглядеть так:

В принципе, создавая документ, можно на этом и остановиться. Однако, можно пойти чуть дальше и немного упростить задачу заполняющему – например, устанавливать дату по умолчанию в текущую – в 99% случаев именно это и необходимо.

Устанавливаем дату по умолчанию

C# код по созданию полей для даты, как на скриншоте, в данном случае не так интересен. Рассмотрим лишь часть, касающуюся Javascript. Необходимо при открытии документа устанавливать в полях текущую дату, делается это так:

function setDay(date) <
var dayField = this.getField(«day»);
if (dayField.value.length == 0) <
dayField.value = util.printd(«dd», date);
>
>

function setMonth(date) <
var monthField = this.getField(«month»);
if (monthField.value.length == 0) <
monthField.value = util.printd(«date(ru)«, date, true);
>
>

function setYear(date) <
var yearField = this.getField(«year»);
if (yearField.value.length == 0) <
yearField.value = util.printd(«yyyy», date);
>
>

function setCurrentDate() <
var now = new Date();
setDay(now);
setMonth(now);
setYear(now);
>

По сравнению с предыдущим примером JS код увеличился в объемах, поэтому использовать его напрямую в C# строке стало неудобно из-за необходимости экранировать кавычки и вставлять переносы строк. Поэтому поместим данный код в ресурсы, тогда использоваться скрипт будет так:

В результате при открытии документа увидим примерно следующую картину:

Обратите внимание на код для установки месяца – мы используем специфическую перегрузку метода util.printd для вывода локализованного месяца.

monthField.value = util.printd(«date(ru)«, date, true);

Это дает отличные результаты в Adobe Reader, но, к сожалению, не гарантируется, что другие просмотрщики будут корректно поддерживать столь специфические конструкции. При проектировании документа это нужно учитывать. Возможно, стоит заменить этот код на более многословный (самостоятельное получение названия месяца в нужном падеже), но зато поддерживаемый большим количеством просмотрщиков.

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

Валидация вводимых значений

Если при заполнении формы все-таки необходимо поменять дату, то имеет смысл разрешать ввод только цифр в поля для дня и года. Используем для этого следующий Javascript код:

function validateNumeric(event) <
var val ;
for (var i = 0; i app.beep(0);
event.rc = false;
break;
>
>
>

В C# коде используем событие OnKeyPress у контролов для проверки вводимого символа:

PdfJavaScriptAction val >dayTextBox.OnKeyPress = validateNumericAction;
yearTextBox.OnKeyPress = validateNumericAction;

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

Синхронизация значений полей

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

Предположим, имеется документ следующего вида:

Модифицируем его так, чтобы при изменении одного из полей с ФИО обновлялось и другое.

Используем простую Javascript функцию:

function synchronizeFields(sourceFieldName, destinationFieldName) <
var source = this.getField(sourceFieldName);
var destination = this.getField(destinationFieldName);
if (source != null && destination != null) <
destination.value = source.value;
>
>

А также следующий C# код:

PdfDocument pdf = new PdfDocument(“Names.pdf”);

pdf.GetControl(«name0»).OnLostFocus = pdf.CreateJavaScriptAction(«synchronizeFields(«name0», «name1″);»);
pdf.GetControl(«name1»).OnLostFocus = pdf.CreateJavaScriptAction(«synchronizeFields(«name1», «name0″);»);

Теперь при потере фокуса любым из текстбоксов будет обновлено значение другого. Обратите внимание на прием, не встречавшийся ранее, — общий Javascript код помещается в коллекцию PdfDocument.SharedScripts, и далее мы получаем возможность из конкретных action’ов вызывать функцию, определенную в общем коде.

Использовать Javascript можно не только в web-разработке, но и в такой области, как оформление PDF документов. Немного дополнительных усилий, и создаваемые PDF документы порадуют читателя не меньше, чем программа с удобным и продуманным интерфейсом – искушенного пользователя.

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

  • Сложнее писать Javascript код, чем в случае обычной web-разработки. Нужно создать и открыть документ, чтобы проверить корректность написанного кода.
  • Javascript полноценно поддерживается лишь просмотрщиками от Adobe. В альтернативных просмотрщиках поддержка существенно ограничена либо отсутствует вообще.
  • Javascript может быть отключен в просмотрщике PDF.
  • Теоретически исполнение Javascript скриптов в документе небезопасно, и периодически обнаруживаются различные уязвимости.

Вооруженные описанной информацией, не удивляйтесь, если однажды открывшийся PDF документ предложит сыграть в шахматы, а сам в это время по-тихому удалит Foxit Reader из системы

Скачать код примеров из статьи можно здесь.

Форум

Справочник

Поиск по форуму
Расширенный поиск
К странице.

Здравствуйте, используя pdfmake пытаюсь сформировать Счет-Фактуру. Но возникла проблема с добавлением изображения в PDF-файл.
Есть код:

Но файл не формируется из-за ошибки

Если убрать код добавления изображения, то все нормально работает.

Помогите пожалуйста добавить в файл логотип компании.


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

На ПК код работает только после того как страницу перегрузить (без очистки ранее заполненных полей).
А на мобильных код не работает вообще (так как если перегрузить страницу, то все поля очищаются).

Помогите пожалуйста. Как перенести в PDF данные и полей.

JS и pdf

Есть 30 файлом pdf, и меню где можно выбрать каждый файл отдельно, как это все прописать в одной странице? именно открытие файлов.

Я хотел бы сделать так( НО не знаю правильно ли я мыслю). Думаю дать каждому пункту меню свой класс, и в JS сделать проверку.
Вот к примеру 1 пункт меню:

Javascript
16.05.2020, 15:47

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

Как создать PDF файл с именем ZAKAZ_(дата сегодня).pdf
Как создать из «Excel таблицы» — PDF файл с именем ZAKAZ_(дата сегодня).pdf при помощи макроса? .

Как соединить несколько pdf файлов в один документ pdf?
имею распечатку книжки в 45 pdf файлах. как-то неудобно просматривать её. как их все объединить в.

Как организовать работу PDF, чтоб он искал в PDF файле определенную строку
Имеется код (Он всего лишь создает файл и текст, который указывается в форме) using System;.

Не могу открыть в PDF читалке в форме PDF файл имя которого хранится в БД Access
в приложении есть поиск он ищет в БД(1 таблица, 2 поля) и если в поисковую строку вводится название.

Как загрузить pdf из viewer.js?

Я был на сайте с pdf без опции загрузки. Я прочитал в интернете, что вы должны «проверить элемент», чтобы найти истинный источник. После прокрутки элементов > свойства я нашел «базовый URI» (я не совсем понимаю это)

отсюда pdf загружен, но все еще не было кнопки печати /сохранения. Если я использую печать Chrome> Сохранить как PDF, он сохраняет только несколько страниц. Из того, что я могу сказать, играя с ним, заключается в том, что он загружает только определенные страницы и только для время. После этого страницы снова становятся пустыми, пока вы не прокрутите их. Я попытался прокрутить весь документ, а затем распечатать>Сохранить PDF, но он показывал только нижние страницы, а верхние снова опустели. Кто-нибудь есть идеи о том, как получить весь документ в формате PDF?

Спасибо за вашу помощь! Я прочесал сеть, пытаясь понять это, но, увы, мне нужна помощь.

2 ответов

открыв сетевой монитор в devtools Вашего браузера, вы можете просмотреть все сетевые запросы, которые делает страница; где-то там должен быть PDF, хотя URL / URI может выглядеть не так.

по указанной вами ссылке страница сделала запрос на get.php с хэшем строки запроса документа-ответ был простой PDF-файл.

надеюсь, еще не поздно ответить на ваш вопрос. Вот шаги:

  1. откройте конкретный pdf в читателе на весь экран
  2. запуск inspect
  3. вы найдете кнопку загрузки, стилизованную под display: none, измените ее на inline
  4. загрузить pdf.

Внедрение PDF-файла на веб-страницу без использования встроенного средства просмотра PDF

В настоящее время я использую стандартный способ вставки pdf в браузер, однако встроенный просмотрщик PDF для моего целевого браузера работает не так, как ожидалось. Я хотел бы заставить (Chrome, Firefox и IE8 (если возможно, но IE9 + тоже нормально)), чтобы использовать Adobe Reader. Проблема в том, что я могу изменить этот параметр только вручную. Есть ли способ изменить параметр в HTML / JS / PHP? Благодарю.

Я пытаюсь найти решение, и кто-то предложил заголовок, не работает, к сожалению, например

Я сделал это некоторое время назад. Использование JQuery было отличным способом обойти это ��

pdf.js:

Надеюсь это поможет!

Вы можете использовать средство просмотра Google PDF для вставки файлов PDF на свой веб-сайт. Используйте эту ссылку https://docs.google.com/viewer

Ознакомьтесь с PDFObject, который представляет собой библиотеку Javascript для встраивания PDF-файлов в файлы HTML. Он отлично работает с совместимостью с браузером и, скорее всего, будет работать с IE8.

В вашем HTML вы можете настроить div для отображения файлов PDF:

Затем вы можете использовать Javascript-код для вставки PDF-файла в этот div:

Вы можете использовать средство просмотра документов или best-pdf-viewer

В приведенном выше javascript, html используется javascript, html . Да, если вы не хотите конвертировать их в js or html вы можете использовать Swftools . Здесь вы можете создать свой собственный скин, а затем прочитать: SWFTools (pdf2swf) для правильной работы с Flex

Отображение pdf в Iframe может быть другим вариантом.

Ваша проблема может совпадать с Show pdf file в браузере без Adobe Reader

Trick Chrome и Firefox (и, возможно, другие браузеры), чтобы отображать PDF-файлы с помощью плагина Adobe Reader (для обеспечения полной поддержки открытых файлов PDF), используя один из следующих типов «Adobe PDF в формате XML» в вашем коде для встраивания:

Это прекрасно работает с моим ответом сегодня, и я надеюсь, что он будет продолжать работать нормально. Я использую его в настоящее время со стандартными файлами PDF в качестве обходного пути для встраивания PDF-файлов в браузер, которые должны использовать плагин Adobe PDF, а не встроенный в PDF-рендеринг. Несмотря на то что мои файлы PDF являются стандартными (не XML) файлами, они, похоже, очень просто загружаются с этим новым параметром типа приложения.

Как вывести PDF на WordPress

Многие компании хранят документы с конфиденциальными данными клиентов. Вы, конечно, не будете публиковать эти данные в небезопасном формате.

Можно загрузить PDF-файл на WordPress-сайт и указать ссылку на него. Но инструмент просмотра PDF-документов обеспечивает более удобную работу.

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

Рынок решений для просмотра PDF на сайтах WordPress достаточно насыщен. Но наиболее эффективным является сервис Scribd.

Что такое Scribd и почему это лучшее средство просмотра PDF для WordPress?

Scribd — это сервис подписки. Он предназначен для распространения книг, документов, аудиокниг, журналов и новостей.

Как издатель вы можете бесплатно загружать любой контент, даже документы в формате PDF. А также контролировать, кто может просматривать эти файлы.

Чтобы упростить задачу, Scribd предлагает код для встраивания на сайт каждого загружаемого файла и инструментами для отображения PDF на WordPress.

Как отобразить PDF на WordPress

Мы будем использовать Scribd для отображения PDF на сайте. Это самый простой способ разместить PDF-документы на WordPress. Он позволяет разместить несколько PDF-файлов на одной странице, тогда как большинство плагинов — нет.

Как использовать этот инструмент:

Шаг 1: Создайте бесплатный аккаунт Scribd

Перейдите на главную страницу Scribd . На ней вы увидите несколько кнопок для регистрации. Для публикации вам нужно создать обычную учетную запись пользователя Scribd.

Кнопка « Start Your Free 30 Days » предназначена для подписчиков, а не издателей. Поэтому вам не нужно предоставлять свои платежные реквизиты.

В нижней части панели авторизации найдите ссылку: « New to Scribd? Sign Up» .

Вы можете зарегистрироваться с помощью Facebook или Google. Нажмите на кнопку « Sign Up «, когда закончите процесс регистрации.

Здесь начинается процедура, которая смущает людей. Кажется, что Scribd требует от вас произвести оплату услуг, но это не так. Пропустите этот шаг, вернувшись на главную страницу сервиса. Это можно сделать, нажав на логотип Scribd, расположенный в верхнем левом углу.

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

Шаг 2. Загрузите PDF-документ

Чтобы загрузить PDF-файл, нажмите кнопку « Upload » , расположенную в правом верхнем углу.

Нажмите на кнопку « Select Documents To Upload » . Откроется проводник для выбора файлов.

Когда файл загружен в Scribd, укажите дополнительную информацию:

Убедитесь, что флажок « Make this document private » снят. Документ должен быть общедоступным, чтобы его можно было встроить в WordPress -сайт.

Шаг 3: Найдите код для встраивания на WordPress


На странице « Share it!» выберите опцию « Embed» , чтобы создать код для встраивания.

Убедитесь, что выбрали формат WordPress . После этого укажите:

  • Размер (рекомендуется auto).
  • Стартовую страницу.
  • И другие опции.

Скопируйте код для встраивания.

Шаг 4. Публикация PDF через WordPress

Откройте страницу или запись, в которую необходимо встроить PDF-файл. Перейдите на вкладку « Текст » во встроенном редакторе и вставьте код Scribd.

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

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

Другие программы просмотра PDF для WordPress

Вот несколько плагинов WordPress для просмотра PDF:

  • PDF Embedder ;
  • WP Booklet ;
  • Vanilla-pdf-embed ;
  • Google Doc Embedder .

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

Многие документы читаются намного лучше именно с помощью средства просмотра PDF для WordPress. Поэтому используйте его чаще!

Данная публикация представляет собой перевод статьи « How to Display PDF in WordPress – Your Own WordPress PDF Viewer » , подготовленной дружной командой проекта Интернет-технологии.ру

Функциональные характеристики Master PDF Editor

Master PDF Editor — это простая, но эффективная программа для работы с PDF файлами. С ее помощью вы сможете создавать, редактировать, просматривать, шифровать, подписывать и печатать интерактивные PDF документы. Возможности программы включают в себя полную поддержку PDF файлов, импорт/экспорт PDF страниц в форматы изображений, преобразование XPS в PDF и 128-битное шифрование. Приложение позволяет добавлять различные элементы управления, такие как кнопки, текстовые поля, флажки и многое другое, а также обработчики событий для определенных действий пользователя (нажатие, клик, прокрутка или наведение). Мощные инструменты комментирования, а также широкие возможности редактирования сделают вашу работу проще, чем когда-либо.

Открытие и просмотр PDF файлов

  • Открытие документов PDF для просмотра, печати, заполнения форм, редактирования всех объектов и сохранения сделанных изменений.
  • Открытие PDF документа в формате XFA для просмотра, заполнения форм и печати.
  • Просмотр документов, защищенных паролем (требуется ввести пароль)
  • Настройка параметров просмотра документа (выбор вида страницы, поворот страницы, отображение для просмотра одной или двух страниц одновременно, полноэкранный режим и др.)
  • Поиск текста в документе, включая комментарии (с учетом регистра, только целые слова)
  • Навигация по документу (переход к определенной странице, переход с помощью закладок, переход при помощи миниатюр страниц)
  • Копирование текста, изображений, форм и других объектов.
  • Просмотр вложенных файлов. Их добавление, переименование, удаление.
  • Отправка PDF файлов по email с используя интерфейс программы (GUI)
  • Отправка по ftp, http(s), email с использованием JavaScript
  • Печать PDF документа с широкими настройками (печатать только документ, печатать документ и аннотации и др.)
  • Гибкая настройка внешнего вида как самой программы так и структуры просматриваемых документов с изменением цвета, шрифта и фона документа. Используется для удобства чтения PDF книг.

Создание документов PDF

  • Создание документа PDF при помощи встроенного виртуального принтера из приложений, которые поддерживают печать (Microsoft World, Excel, OpenOffice).
  • Создание пустого документа
  • Создание документов со страницами разных размеров (за счет уменьшения, увеличения или обрезки страницы).
  • Создание документа из существующих файлов PDF и файлов изображений.
  • Сканирование бумажных документов в PDF
  • Распознавание сканированных изображений с возможностью поиска и редактирования текста. (Текст может располагаться как перед изображением так и за ним)
  • Оптимизация отсканированных страниц
  • Добавление пустых страниц в текущий документ
  • Добавление в текущий документ страниц из файлов PDF и изображений
  • Объединение в один файл нескольких документов
  • Разъединение PDF файлов

Защита документов PDF

  • Создание цифровой подписи в документе с гибкими настройками внешнего вида (использование изображения или форматированного текста)
  • Подписание документа с использованием цифрового сертификата
  • Проверка цифровой подписи
  • Защита PDF документа с помощью паролей двух видов (пароля для открытия документа и пароля для редактирования документа)

Комментирование документов PDF

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

  • Экспорт и импорт данных комментариев

Редактирование документов PDF

  • Добавление, редактирование, удаление, замена и форматирование текста в документе
  • Преобразование изображения текста PDF в редактируемый текстовый формат
  • Создание, редактирование, удаление форм, и управление ними. Настраиваемые действия с формами
  • Добавление, удаление и редактирование гиперссылок и управление ними. Настраиваемые действия для гиперссылок
  • Копирование и вставка графических объектов и изображений. Их перемещение, выравнивание, удаление и др.
  • Вставка скопированных объектов на нескольких страницах одновременно
  • Добавление, редактирование, удаление водяных знаков, фона, колонтитулов в документ. Настройка параметров данных объектов.
  • Редактирование содержимого контейнера
  • Создание, перемещение, удаление и изменение закладок.Настраиваемые действия с ними.
  • Удаление контура обрезки
  • Управление страницами документа (вставка, извлечение, удаление, изменение порядка, изменение размера, обрезка, поворот, и др.)
  • Вставка страниц текущего документа в другой PDF файл
  • Экспорт PDF в изображение
  • Экспорт PDF в текстовый формат
  • Экспорт и импорт страниц, включая закладки
  • Функция оптимизации PDF файлов (с помощью преобразования рисунков JPG и JBGI2, удаление неиспользуемых элементов, преобразование всех форм и комментариев в векторные рисунки)

Редактирование свойств документа и/или его отдельных страниц

  • Изменение свойств документа (такие как название, сведения о документе, автор и др.)
  • Изменения свойств документа, которые настраивают его внешний вид при открытии
  • Создание JavaScript, который выполняется при открыти документа,
  • Создание JavaScript, который выполняется перед закрытием, перед сохранением, после сохранения, перед печатью, после печати документа.
  • Создание JavaScript для каждой страницы, которые выполняются перед и/или после просмотра страницы

Создание и редактирование интерактивных форм в документах PDF

  • Распознавание полей форм
  • Заполнение и сохранение форм в документах PDF.
  • Создание и редактирование различных видов интерактивных форм (поле со списком, текстовое поле, ссылка, кнопка, флажок, переключатель и др.)
  • Установка индивидуальных параметров для форм разных видов
  • Настройка внешнего вида форм (отдельно для кнопки, текстового поля и т. д.)
  • Добавление изображений на кнопку
  • Настраиваемые действия для форм
  • Экспорт и импорт данных форм
  • Расположение полей форм по сетке
  • Одновременный выбор нескольких полей форм (для копирования, выравнивания, центрирования и др.)
  • Копирование полей формы
  • Вставка скопированного поля/полей форм на нескольких страницах одновременно
  • Поддержка JavaScript форм
  • Поддержка автоматической калькуляции и валидации данных с использованием JavaScript

Системные требования:

Microsoft Windows:
XP (Service Pack 3), 2003, 2008, Vista, 7, 8, 10 (32 & 64 бит)

Linux:
Для версии с Qt4 — требования: Qt 4.6.2 и выше, glibc 2.12 и выше (32 & 64 бит)
Для версии с Qt5 — требования: Qt 5.41 и выше, glibc 2.19 и выше (только 64 бит)

macOS:
Версия 10.7.5 и выше 64 бит.

MnogoBlog

как создать сайт на wordpress, настроить и оптимизировать wordpress

Вставляем Pdf viewer – PDF.js на wordpress (плагин и код)

Здравствуйте, сегодня будем вставлять на сайт wordpress Javascript библиотеку PDF.js – это можно сделать с помощью кода или же использовав wordpress плагин.
Скачать исходники для статьи можно ниже

1. Плагин wordpress для подключения Pdf.js

Плагин называется – “PDF.js Viewer Shortcode”, сведения о плагине:
Сайт плагина: “wordpress.org/plugins/pdfjs-viewer-shortcode/”
Также можно скачать плагин с моего сайта – здесь.
Количество активных установок: 10,000+
Последнее обновление: 3 года назад.
Автор плагина: Ben Lawson

Устанавливаем и активируем плагин через панель управления wordpress: в левом меню админки выбираем пункт “Плагины”, подпункт “Добавить новый”, в строку поиска вводим “PDF.js Viewer Shortcode”.

После активации плагина в Редакторе записи/страницы появится новая кнопочка Add PDF:

С помощью неё загружаем/вставляем pdf файл на сайт.

Также pdf файл можно вставить с помощью шорткода:

– url (required): direct url to pdf file
– viewer_width (optional): width of the viewer (default: 100%)
– viewer_height (optional): height of the viewer (default: 1360px)
– fullscreen (optional): true/false, displays fullscreen link above viewer (default: true)
– download (optional): true/false, enables or disables download button (default: true)
– print (optional): true/false, enables or disables print button (default: true)

Pdf viewer на сайте будет выглядеть следующим образом:

2. Вставляем Pdf.js на сайт с помощью кода.

Сайт библиотеки:
“github.com/mozilla/pdf.js”

Код для подключения библиотеки:

Здесь в параметре ifrm.src нужно указать ссылку на pdf файл, но сначала указывается ссылка на pdf viewer (в данном примере он находится по адресу: “http://u733006.s03.wh1.su/wp-content/plugins/pdfjs-viewer-shortcode/pdfjs/web/viewer.php”, так как я устанавливал плагин “PDF.js Viewer Shortcode”, но можно этот pdf viewer выдернуть из плагина и разместить в нужное вам место на сайте) потом ставиться “?file=” и указывается адрес pdf файла, где все знаки “/” заменены на “%2F”, а двоеточие на “%3A” (в данном примере адрес pdf файла “http://u733006.s03.wh1.su/files/2020/07/p111.pdf”)

И код ссылки, которая вызывает загрузку скрита с pdf файлом:

Чтобы использовать JavaScript на сайте wordpress можно воспользоваться плагином CSS & JavaScript Toolbox (стараница плагина на “wordpress.org” – “ru.wordpress.org/plugins/css-javascript-toolbox/”)

Прикрепить скрипт к какой-нибудь записи:

А в “Редакторе записи” прописать ссылку на вызов скрипта с pdf файлом:

Ищем эксплойты в PDF-документах своими силами

Содержание статьи

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

WARNING

Многообещающий аттач

Как-то раз, приводя в порядок почтовый ящик и удаляя нежелательную корреспонденцию, я наткнулся на несколько писем с вложением, якобы от британского подразделения Google (правда, отправленных почему-то с китайских серверов), с очередным заманчивым предложением. Собственно, внимание привлекли не сами письма, а то, что они были с вложением в виде PDF-файла. «Вот китайские друзья! Вот молодцы! Прислали мне 0-day», — подумал я. И сразу же полез проверить файл на virustotal — вдруг это какое-то старье. Подумав, сервис ответил, что файл абсолютно нормальный, — ни один антивирус не имел к нему никаких вопросов. «Что-то здесь не так. Не могли же мои китайские друзья так меня подвести?» Развеять сомнения можно было только одним способом — взять и исследовать файл самому. Результатом и полученными знаниями я и хотел бы с тобой поделиться.

PDF-формат

Прежде чем начать, давай кратко рассмотрим формат PDF-документов. PDF-файлы состоят в основном из объектов, которые бывают восьми типов: boolean-значения; числа; строки; имена (Names); массивы (упорядоченный набор объектов); словари (Dictionaries) — коллекция элементов, индексируемых по имени; потоки (Streams) — обычно содержащие большой объем данных; Null-объекты.

Каждый PDF-документ должен начинаться с заголовка, который идентифицирует его как PDF-файл и включает в себя номер версии: %PDF-1.5 . Заканчиваться файл также должен определенным образом — сигнатурой %%EOF .

Хакер #178. Mesh-сети или строим свой интернет

После заголовка идут объекты. Каждый объект начинается с номера ссылки, номера версии и ключевого слова obj . За ним располагается контейнер объекта, заключенный между символами и >> . Заканчивается объект ключевым словом endobj . Чтобы было понятней, приведу пример:

Данный объект начинается с номера ссылки — 1, номера версии — 0 и ключевого слова obj. Затем идет контейнер объекта (между символами и >> ). Заканчивается все ключевым словом endobj . Контейнер может состоять из различных объектов. Наиболее широко распространенным является словарь (dictionary), представляющий собой последовательность пар «ключ — значение», заключенных в скобки и >> . Объект dictionary — это ассоциативная таблица, содержащая пары объектов, известных как записи. В приведенном выше примере Type — это ключ, а /Catalog — значение.

Любой объект в PDF-файле может быть отмечен как косвенный (indirect). Это дает ему уникальный идентификатор, с помощью которого остальные объекты могут ссылаться на него. Например, ключ /Outlines указывает на косвенный объект 2 0 .

Еще один важный объект, входящий в состав PDF-файла, — это поток (Stream), который, как String, представляет собой последовательность байт. Stream включает в себя Dictionary, за которым следуют от 0 байт данных, заключенных между ключевыми словами stream и endstream . Поток, в отличие от строки, может иметь неограниченную длину. Одна из опциональных записей, которая может быть в Dictionary потока, — Filter. Filter — это значение, которое указывает, надо ли распаковывать или расшифровывать данные потока. В PDF-файлах используется множество алгоритмов сжатия и шифрования, таких как: FlateDecode (основанный на DEFLATE или ZIP-алгоритме), DCTDecode (фильтр, основанный на JPEG-стандарте) и другие.

JavaScript — еще один из часто встречающихся объектов в PDF-файле. Движок JavaScript от Adobe частенько страдает от различных уязвимостей, поэтому все, что надо злоумышленнику для успешной эксплуатации, — это создать специальный скрипт, который бы использовал очередную уязвимость в движке. Объект JavaScript обычно выглядит следующим образом: /JavaScript /JS java_script_code . Переменная java_script_code может представлять непосредственно сам код или быть косвенным объектом, ссылающимся на другой JavaScript-код.

JavaScript указывает на косвенный объект

Наиболее интересные «поля»

Как мы выяснили, PDF-файл состоит из заголовка, объектов, таблицы перекрестных ссылок (для определения местоположения объектов) и трейлера. С точки зрения охоты за эксплойтами самыми интересными для нас строками будут:

  • /OpenAction и /AA (Additional Action) определяют скрипт или действие, запускаемое автоматически;
  • /Names , /AcroForm , /Action также могут устанавливать и запускать скрипты или действия;
  • /JavaScript задает JavaScript-код для выполнения;
  • /GoTo* меняет отображение на указанное место внутри исходного или другого PDF-файла;
  • /Launch запускает программу или открывает документ;
  • /URI обращается к ресурсу по его URL;
  • /SubmitForm и /GoToR могут отправлять данные на заданный URL;
  • /RichMedia используется для встраивания Flash в PDF;
  • /ObjStm может прятать объекты внутри Stream’a.

Однако при их поиске не стоит забывать про возможность обфускации с помощью hex-кодов, при которой, например, /JavaScript может превратиться в /J#61vaScript . Также очень часто прибегают к различным трюкам со строками, чтобы усложнить жизнь антивирусам и исследователям. В нормальном виде каждая строка должна располагаться внутри круглых скобок: /URI (https://xakep.ru) . Однако строку можно перенести на несколько, добавив бэкслеш после каждой строки:

Естественно, количество переносов не ограничено, так что ничто не мешает записать строку в «столбик». Помимо этого, можно воспользоваться восьмеричным представлением символов и получить результат вида: /URI (\150ttp://xakep.ru) . Или, если перевести все символы: /URI (\150\164\164\160\163….) . Строки также можно представить в шестнадцатеричном виде /URI . В таких строках шестнадцатеричные числа можно разделять пробелами ( ), причем количество этих пробелов не ограничено. Еще один хитрый способ модификации строк — это шифрование. Тебе когда-нибудь встречался PDF-документ, из которого нельзя было скопировать текст или который нельзя было распечатать? Если так, то это как раз и был тот самый зашифрованный документ. В таком документе зашифровываются все строки и потоки, а сами объекты остаются незашифрованными. Эти моменты тоже придется учитывать при ручном анализе PDF-файлов, потому что такие приемы часто применяются для создания полиморфных форм одного зараженного PDF.

Пример зашифрованной строки

Инструментарий

Для исследования PDF-файлов пригодятся следующие инструменты:

  • PDFtk — кросс-платформенная программа для работы с PDF-файлами, позволяющая проводить декомпрессию их сжатого контента;
  • PDFiD — позволяет сканировать файл на наличие определенных ключевых слов, позволяя сразу выяснить, используется ли в PDF-файле JavaScript или нет;
  • PDF-parser и pdfwalker производят разбор файла, позволяя установить все элементы, из которых он состоит;
  • pdfextract и pdf.py извлекают JavaScript из PDF-файлов;
  • Malzilla и SpiderMonkey пригодятся для деобфускации внедренного в PDF JavaScript-кода;
  • PDF Stream Dumper — многофункциональная утилита для исследования PDF-файлов, собравшая всю мощь многих утилит под одним графическим интерфейсом;
  • Peepdf и pdfsh предоставляют интерактивный шелл для исследования PDF-файлов;
  • SWF mastah извлекает SWF-объекты из PDF-файлов.

Непростая задача

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

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

Обычный JavaScript

Самый простой вариант — это когда над файлом не проводили никаких манипуляций для сокрытия его вредоносного функционала. Представим, что у нас на руках такой файл и нам надо оценить, нормальный ли он или зараженный. Первым шагом необходимо скормить его антивирусу. Если он молчит и говорит, что все ОK, можно обратиться к сервису VirusTotal, чтобы прогнать файл сразу на нескольких антивирусах. Правда, в случае если используется какая-нибудь 0-day-уязвимость, это, скорей всего, не поможет. Поэтому придется проверить все самому. Начнем с того, что выясним, какие интересные объекты входят в состав нашего файла. Прежде всего нас будет интересовать JavaScript, так как в большинстве зараженных PDF используются уязвимости именно в движке JS. Выявить наличие JavaScript-кода в документе можно несколькими способами: либо открыть файл в любом текстовом редакторе и выполнить поиск по /JavaScript или /JS , либо воспользоваться скриптом pdfid.py — pdfid.py 1.pdf , который отобразит все входящие в файл объекты.

Пример работы pdfid.py

Если в документе присутствует JavaScript, то велика вероятность того, что он содержит вредоносный код. Поэтому дальше надо анализировать его. Так как мы начали с самого простого случая, то никаких дополнительных техник сокрытия не используется и вытащить JS-код из PDF’ки можно с помощью pdf-parser.py:

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

Исследование шелл-кода

Шелл-код в JavaScript обычно формируется при помощи функции unescape , в которую передается строка в юникоде. Для того чтобы шелл-код можно было проанализировать, необходимо восстановить обычный порядок байт для каждого символа. Это можно сделать либо с помощью вспомогательных утилит (например, с помощью Malzilla), либо прямо в консоли Linux:

где pdf-exp.txt — файл с исходным шелл-кодом, shellcode.bin — файл, в который будет записан преобразованный шелл-код. После этого можно приступить к его исследованию. Для этого можно воспользоваться тулзой sctest, входящей в библиотеку libemu:

Исследование шелл-кода при помощи sctest

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

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

После чего скомпилировать и запустить под отладчиком для дальнейшего анализа.

Сжатые потоки

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

Если ты обратил внимание, когда мы говорили про структуру PDF-документа, мы сказали, что у объекта Stream может быть атрибут /Filter , который определяет, каким методом сжаты данные потока. Причем к потоку могут быть применены сразу несколько фильтров (например, /Filter [/Fl /Ahx] ). Что касается интересующего нас объекта JavaScript, то он, в свою очередь, должен содержать либо функцию, либо косвенную ссылку на код для выполнения. Поэтому зараженные файлы очень часто содержат JavaScript-объекты следующего вида: /JS (this.Z0pEA5PLzPyyw\(\)) . При этом простой поиск функции по имени ничего не даст, так как она скорей всего будет расположена в сжатом потоке. Чтобы получить распакованное содержимое потока, можно воспользоваться утилитой PDFtk:

После этого у нас появится файл uncompressed.pdf с распакованным содержимым, пригодным для дальнейшего анализа. Ну а дальше действуем по использованной выше схеме.

Обфусцированный JavaScript

К сожалению, так быстро проанализировать JavaScript-код и выдернуть из него шелл-код, как мы рассматривали до этого, в реальной ситуации не получится. Практически всегда, чтобы запутать антивирусы и усложнить жизнь исследователям, JavaScript-код обфусцируют. В таком случае определить, что он делает, и выделить в нем шелл-код становится уже не такой простой задачей. Деобфусцировать код можно несколькими способами. Можно, например, выполнить его в браузере и вывести через alert() преобразованный код. Или воспользоваться программкой SpiderMonkey, а точнее, ее модифицированной версией, которую можно взятьтут. В отличие от оригинальной версии, которая только интерпретирует JavaScript-код, данный мод позволяет логировать в файл вызовы функций eval() , document.write() , которые чаще всего используются в обфусцированном коде для приведения его в первоначальный вид. Таким образом, перехватив вызов этих функций и сохранив возвращаемый результат в файл, мы получим деобфусцированную версию кода, из которой, как и в предыдущих случаях, необходимо будет извлечь шелл-код и провести его анализ. Алгоритм действий таков:

  • сохраняем обфусцированный код в отдельный файл (например, sample.js );
  • запускаем его в SpiderMonkey — js sample.js ;
  • идем смотреть логи eval*.log , write*.log в поисках деобфусцированного кода;
  • разбираем полученный код и выделяем из него шелл-код.

Ну а дальше анализируем шелл-код и выясняем его функционал.

Эксплойт использует уязвимость в media.newPlayer (CVE-2009-4324)

PDF & SWF

До этого момента мы рассматривали только уязвимости, связанные с ошибками в движке JavaScript. Однако существует еще один вектор распространения вредоносных программ. Дело в том, что PDF-файлы можно использовать просто как «контейнеры»» для хранения и доставки пользователю зараженных SWF-файлов. Да, эти два популярных продукта приносят много хлопот Adobe, которой периодически приходится выпускать security-обновления :). Чтобы проанализировать вредоносные Flash-файлы, их надо предварительно вытащить из PDF-документа. Выполнить это можно при помощи утилиты SWF Mastah:

Опция -o отвечает за то, в какую директорию будут извлечены SWF-файлы. Для решения этой задачи можно также воспользоваться и программой PDF Stream Dumper. Как только SWF-файлы окажутся в указанной папке, их можно будет изучить, например с помощью утилит SWFREtools и SWF Investigator. К сожалению, анализ SWF-файлов нам придется оставить за рамками данной статьи.

Подопытные для анализа

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

Если не хочется ничего скачивать, то можно воспользоваться услугами Metasploit Framework. Запускаем msfconsole и выполняем следующие действия:

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

Таким образом, при помощи wget’а ( MARKDOWN_HASHd2cc360a8dce9a6c58ef159660c7830aMARKDOWN_HASH ) или браузера можно заполучить этот файл для дальнейшего анализа.

Подводя итоги

Сегодня мы познакомились с тем, каким образом можно проводить анализ зараженных PDF-файлов, и рассмотрели основные методы защиты вредоносного кода от исследования. Из-за пристального внимания к безопасности продуктов Adobe можно найти в Сети много инструментов, которые могут взять большую часть рутинной работы по анализу PDF’ок на себя. Так что ты всегда сможешь выбрать софт для решения той или иной задачи. Правда, от необходимости шевелить извилинами это тебя никак не избавит. Что касается меня, то мой файл оказался простой пустышкой. В нем не было ни JavaScript, ни встроенных SWF’ок — лишь только пара изображений и текст. Поэтому, немного разочарованный, я пошел дальше ждать своего халявного 0-day-эксплойта. Надеюсь, скоро пришлют :).

JS и pdf

Есть 30 файлом pdf, и меню где можно выбрать каждый файл отдельно, как это все прописать в одной странице? именно открытие файлов.

Я хотел бы сделать так( НО не знаю правильно ли я мыслю). Думаю дать каждому пункту меню свой класс, и в JS сделать проверку.
Вот к примеру 1 пункт меню:

Javascript
16.05.2020, 15:47

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

Как создать PDF файл с именем ZAKAZ_(дата сегодня).pdf
Как создать из «Excel таблицы» — PDF файл с именем ZAKAZ_(дата сегодня).pdf при помощи макроса? .

Как соединить несколько pdf файлов в один документ pdf?
имею распечатку книжки в 45 pdf файлах. как-то неудобно просматривать её. как их все объединить в.

Как организовать работу PDF, чтоб он искал в PDF файле определенную строку
Имеется код (Он всего лишь создает файл и текст, который указывается в форме) using System;.

Не могу открыть в PDF читалке в форме PDF файл имя которого хранится в БД Access
в приложении есть поиск он ищет в БД(1 таблица, 2 поля) и если в поисковую строку вводится название.

Топ-пост этого месяца:  Как сделать асинхронную загрузку CSS плюсы и минусы разных способов
Добавить комментарий