WordPress PDF Light Viewer: Встраивание PDF на сайт или подбираем PDF-viewer под WordPress

Fork me on GitHub

Рад представить вам мой очередной opensource wordpress плагин под названием PDF Light Viewer. Демо и описание функций можно найти на pdf-light-viewer.wp.teamlead.pw (англ.)

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

Ссылки:

Сайт | Демо | Документация | Github | WordPress | PRO Addon

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

С такими исходными данными я и приступил к поиску решений.

Поиск готовых решений

Сначала я изучил бесплатные.

Flexpaper

На WordPress плагин я не расчитывал, нужен был хотя бы какой-то. Первое, что я нашел — это Flexpaper, и его реализация на Flash, а также, как было заявлено, на HTML5. У меня честно признаться HTML5 заработал так сяк, но не красиво, а Flash смотрелся красиво на скриншоте, но уронил браузер при загрузке страницы (сейчас такой проблемы не наблюдается, может магнитные бури). Потом я безуспешно пытался ковыряться в инструменте для опубликования книги и в конце концов плюнул. Хотя во флешевой версии функционал просмотровщика был очень даже богатый.

Демо: http://devaldi.com/zine/NZ_Tourism_2007.php?ro=html5,flash

PDF.js

Замечательная вещь от Mozilla. Это совсем не flipbook, как Flexpaper, навигация по PDF документу происходит вертикально скроллом. Зато есть определенные плюсы, как например тот факт, что плагин не требует Flash, работает шустро (так мне казалось) и не требует конвертации изначального PDF.

Демо: http://mozilla.github.io/pdf.js/

Более того, чуть поискав, я нашел основанный на PDF.js ViewerJS

ViewerJS

Эти ребята пошли дальше. В своем продукте они вдобавок к PDF, сделали еще и поддержку форматов ODT, ODP и ODS — открытые форматы для текстовых документов, презентация и таблиц.

Демо: http://viewerjs.org/examples/

Я возрадовался и стал интегрировать. Но уже при первом тесте реального документа я понял, что все пропало. Файл размеров ~30Мб грузился с сервера частями. Страничка зависили секунд на 30. И это было кошмарно. Вся беда была в том, что у PDF было много графики. А значит решение на javascript как-то само собой отпадало.

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

Я сменил вектор и вскоре пришел к идее конвертации PDF в HTML, хотя раньше приходилось это делать только наоборот

pdf2htmlex

Это конвертер из PDF в HTML. Я так и не дошел до конца с ним, потому что в процессе вдруг осознал, что клиент не будет всего этого делать.

Демо: https://github.com/coolwanglu/pdf2htmlEX

Видимо я был слишком увлечен этой идеей Да, я могу сделать конвертацию сейчас… а кто будет это делать потом? Я понял, что конвертация должна происходить на сервере и иметь какой-нибудь адекватный интерфейс.

Я начал искать конкретно конвертеры и даже нашел платные, но уже готовые плагины для WordPress:

WowBook, $18, >2500 покупок — http://codecanyon.net/item/wowbook-a-flipbook-jquery-plugin/1791563

Real 3D FlipBook, $31, ~1500 покупок — http://codecanyon.net/item/real-3d-flipbook-wordpress-plugin/6942587

Diamond FlipBook, $24, ~800 покупок — http://codecanyon.net/item/diamond-flipbook-jquerypluginwordpress/5823062

Это хорошие и качественные плагины, полные фич и с красивой анимацией (а некоторые еще и со звуком). Из этих трех, мне больше всего нравился Diamond FlipBook и я даже представлял, как он должен работать, потому что и сам раньше видел библиотеку turn.js.

Сперва я собирался купить Diamond FlipBook, но в какой-то момент мне стало очень интересно построить свой велосипед самому, тем более что толкового с открытым кодом я не нашел. Было решено делать самому.

Создание своего плагина

Совершенно неожиданно для себя я выяснил, что ImageMagick — замечательная библиотека для манипуляции изображениями — поддерживает конвертацию PDF -> JPEG. Это и легкло в основу конвертера. Я решил дать возможность пользователю конвертировать документ силами сервера. При этом пользователь мог переконвертировать документ в любой момент и изменить при этом качество выходящего изображения для того, чтобы регулировать размер картинки страницы. Это было сделано легко.

Затем я добавил отдельный Custom Post Type для PDF файлов (потому что фактически PDF сохраняется в CPT сущности), но немного подумав, также добавил настройку для того, чтобы можно было скрыть этот пункт, если вдруг пользователь будет загружать PDF раз в год.

Я прикрутил turn.js и плагин для перехода в полный экран, добавил кнопку скачивания документа и опциональные thumbnails внизу документа. Все шло хорошо.

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

Я попробовал процесс конвертации большого PDF через Imagick и был неприятно удивлен. Слишком долго. А значит нужно выносить процесс в фон, оставляя пользователю лишь индикатор процесса. Кроме того нельзя конвертировать весь документ сразу, иначе это начинало сказываться на производительности сервера.

Проще всего мне казалось реализовать это через cron, что я и сделал. На локальной машине все заработало чудесно, а вот на сервере клиента не сработало. Крон не запускался, потому что настройками сервера были запрещены loopback-запросы, то есть запросы сервера самого к себе. Можно было написать хостинг-провайдеру, но я же пытался написать универсальное решение, верно?

Было решено вынести background-процесс в ajax-polling. Сказано-сделано. Никаких проблем с loopback-запросами, быстрее по сравнению с кроном, учитывая что за один вызов я разрешал конвертировать всего одну страницу. Да, есть и минусы — документ конвертируется, пока пользователь находится в административном интерфейсе, тем не менее он видит прогресс и его движения не скованы — он может свободно перемещаться и выполнять другие действия — конвертация не прекратится. Она возобновится, даже если он уйдет и вернется через месяц.

Такие дела, как говорит Курт Воннегут в «Бойне номер пять».

Плагин полностью бесплатный и имеет открытый исходный код.

Скриншоты:

screenshot-1

 

screenshot-2

 

screenshot-3

Ссылки:

Сайт | Демо | Документация | Github | WordPress | PRO Addon

Полезно(7)Бесполезно(3)

12 Responses to “ WordPress PDF Light Viewer: Встраивание PDF на сайт или подбираем PDF-viewer под WordPress ”

  1. Привет,
    Очень хороший plugin, мне очень понравился, молодец.
    Есть вопрос.
    У меня не работает на production и demo сайте.
    И на том и на другом есть запреты на php.ini в таком порядке

    disable_functions = virtual, dl, phpinfo, apache_child_terminate, apache_setenv, define_syslog_variables, escapeshellcmd, eval, fp, fput, highlight_file, ini_alter, ini_get_all, ini_restore, inject_code, mysql_pconnect, passthru, phpAds_remoteInfo, phpAds_XmlRpc, phpAds_xmlrpcDecode, phpAds_xmlrpcEncode, posix_getpwuid, posix_kill, posix_mkfifo, posix_setpgid, posix_setsid, posix_setuid, posix_setuid, proc_close, proc_get_status, proc_nice, proc_open, proc_terminate, shell_exec, show_source, system

    And Errors mod_fcgid: stderr: PHP Warning: sort() expects parameter 1 to be array, boolean given in wp-content/plugins/pdf-light-viewer/controllers/PdfController.php on line 325

    Мог бы помочь что нужно убрать из списка что бы заработало.
    Заранее спасибо.

    Полезно(0)Бесполезно(0)
    • Городецкий

      Городецкий

      Привет, а почему ты решил, что проблема именно в disable_functions? Установлен ли Imagick на сервере, как приложение и как pecl расширение? Идет ли процесс импорта или может быть проблема только в отображении? Нужно больше информации, я постараюсь помочь, чем могу.

      Полезно(1)Бесполезно(0)
      • Привет, процесс импорта нет не идет совсем.
        данные сервера и сайта демо
        php -> 5.4.35
        mysql -> 5.5.40-cll-lve
        wordpress -> 3.9.1
        PHP is 5.2 or higher
        Imagick is supported Установлен Imagick на сервере
        Upload folder: /wp-content/uploads/pdf-light-viewer is writable
        Вот снимок экрана с сайта http://imagebin.ubuntu-gr.org/1418219531.png
        Заранее спасибо.

        Полезно(0)Бесполезно(0)
        • Городецкий

          Городецкий

          К сожалению, пока что предположений нет. Хорошо бы было взглянуть на ajax-ответы от сервера, если есть какие-то ajax-запросы, кроме системного пинга. Совсем идеально было бы подебажить через ftp/sftp, но просить об этом не имею права.

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

          Баг трекера у нас пока нет, но можем перенести общение в support[собака]teamlead.pw, если так будет удобнее.

          Полезно(1)Бесполезно(0)
  2. Скажите пожалуйста, а можно ли переделать ваш плагин для какой-нибудь DMS, например Leto|Seed DMS или OwnCloud? Раньше стояла Knowledgetree c плагином от компании Либэр для защищенного просмотра Pdf. Но эта система поддерживает максимум php 5.3.3 и жутко тормозит при индексировании полнотекстового содержимого PDF-ок. Плюс все разобранные в jpg документы хранятся в кэше, который в несколько десятков раз превышает объем хранилища самих Pdf-документов. У вордпресса какой-то свой особенный API для плагинов?

    Полезно(0)Бесполезно(0)
    • Городецкий

      Городецкий

      Думаю переделывать не нужно. Основную работу выполняет ImageMagick, остальной функционал - интеграция с WordPress. Таким образом львиная доля функционала я думаю будет бесполезна для указанных вами систем (по крайней мере я так думаю, хотя ни с одной из них не сталкивался).

      ImageMagick довольно прожорлив к ресурсам, если Knowledgetree использовал его для кодирования PDF -> JPG, то проблемы с производительностью могут быть связаны с этим.

      Я не замерял, но вполне возможно, что результирующие изображения ImageMagick'а превосходят исходные по размерам.

      У WordPress'а есть свой собственны API - вот например https://codex.wordpress.org/ru:API_WordPress

      Полезно(1)Бесполезно(0)
  3. Здравствуйте, вам наверное уже задавали этот вопрос. При перелистывание страниц они на мгновение мерцают белым цветом. Можно ли это исправить или напишите в каком направлении копать что бы исправить это самому. Заранее спасибо.

    Полезно(0)Бесполезно(0)
    • Городецкий

      Городецкий

      Да, был такой баг. Какую версию вы используете?

      Полезно(0)Бесполезно(0)
  4. у меня не конвертирует ждал час 0%

    Полезно(0)Бесполезно(0)
    • Городецкий

      Городецкий

      Добрый день, напишите пожалуйста на support@teamlead.pw с более детальным описанием проблемы: включая версию плагина, версию WordPress, а также серверного окружения, которое вы используете (версия веб-сервера, версия php).

      Проверьте пожалуйста все ли требования плагина соблюдены на странице настроек /wp-admin/options-general.php?page=pdf-light-viewer ?

      Также приложите пожалуйста файлы журналов плагина, они находятся в директории /wp-content/pdf-light-viewer-logs/ вашего сайта.

      Заранее спасибо

      Полезно(0)Бесполезно(0)
  5. Добрый день!
    Установила PRO Addon на сайте нашей организации. Все отлично. Начальство в восторге.
    Вот наша тестовая страница с плагином http://geoinf.kiev.ua/pz_m36-31_eng/
    У нас большие объемы информации. Перед тем как грузить и конвертировать хочу задать несколько вопросов. Может я что-то упустила в настройках.
    1. Не отображается иконка “Download” в верхней панели рядом с иконкой “Print”.
    2. В браузере Opera (Opera/9.80) еще не отображается иконка “Fullscreen”
    3. В браузере Chrome ( 48.0) в режиме “Fullscreen” книга отображается не на весь экран и появляются вертикальная и горизонтальная полосы прокрутки.

    Можно ли это исправить?
    Буду благодарна за помощь.

    Полезно(0)Бесполезно(0)
    • Городецкий

      Городецкий

      Здравствуйте Наталия,

      Я ответил вам в письме, но также добавлю ответ здесь для тех, у кого будут похожие вопросы.

      1. Кнопка Download включается и выключается на странице редактирования PDF и называется "Allow download", там же есть и поле для альтернативной ссілки на скачивание, если она нужна: http://pdf-light-viewer.wp.teamlead.pw/wp-content/plugins/pdf-light-viewer/documentation/img/screenshots/importing-pdf.jpeg

      2. К сожалению полноэкранный режим будет работать только в современных браузерах. С таблицей совместимости вы можете ознакомиться по этому адресу например http://caniuse.com/#search=fullscreen Для Opera поддержка заявлена начиная с версии 12.1

      3. К сожалению такой баг существует, он будет исправлен в следующих релизах. За прогрессом вы можете следить в нашей Дорожной карте https://trello.com/c/RQAxnCmf/16-enhance-full-screen-function-in-chrome-and-ie . Как только выйдет обновление вы получите сообщение о нём через Codecanyon.

      Полезно(0)Бесполезно(0)
Комментарии закрыты.