Открываем документ PDF на странице сайта.
Решил рассказать, как я размещал на сайте файл PDF, а не переписывал его в файл html. Для меня в этом вопросе было много непонятного. В интернете также считается, что разместить PDF на сайте сложно.
Использовал я библиотеку PDF.js, которая предназначена для работы с PDF-файлами в веб-браузере. Загрузил из интернета файл pdfjs-3.8.162-dist.zip, разархивировал его.
В состав zip входят:
⦁ Файл LICENSE – лицензия.
Папка web.
⦁ Файл viewer.html – встроенный PDF-просмотрщик со множеством элементов управления, который позволит вам отображать PDF-документы на вашей веб-странице.
⦁ Файл viewer.css – внешний файл стилей для viewer.html.
⦁ Файл viewer.js – основной скрипт, который обеспечивает функциональность просмотра PDF-файлов в браузере. Он содержит код, который позволяет отображать страницы PDF, выполнять поиск по документу, масштабировать и прокручивать страницы, а также другие функции, связанные с просмотром PDF.
⦁ Файл viewer.js.map – файл карты соответствия, который используется для отладки кода. Он содержит информацию о соответствии между исходным кодом JavaScript и скомпилированным кодом в файле viewer.js. Это помогает разработчикам отслеживать ошибки и понимать, какой исходный код соответствует определенной части скомпилированного файла.
⦁ Файл debugger.css содержит стили, которые используются для отображения отладочной информации или сообщений об ошибках при разработке или отладке приложения, использующего библиотеку pdfjs-3.8.162-dist.
⦁ Файл debugger.js – скрипт, который предоставляет вспомогательные функции для отладки кода, использующего библиотеку pdfjs-3.8.162-dist. Он может содержать функции для вывода отладочной информации, обработки ошибок и другие инструменты, которые помогают разработчикам разрабатывать и отлаживать приложения, использующие библиотеку pdfjs-3.8.162-dist.
⦁ Файл compressed.tracemonkey-pldi-09.pdf – тестовый документ. Используется для проверки работоспособности и показа возможностей.
⦁ Папка standard_fonts содержит 14 шрифтов и 2 лицензии.
⦁ Папка locale содержит внутренние папки с файлами, в которых приведён перевод названий и текстов, используемых в этом программном обеспечении, на многие языки Мира.
⦁ Папка imagesсодержит 55 фото в формате svg и 1 фото в формате gif. Используются как значки для управления и информации.
⦁ Папка cmaps и её 169 файлов – необходимы для обеспечения корректного отображения текста в PDF-файлах и поддержки различных языков и кодировок.
Подробнее о cmaps.
Папка cmaps и ее 169 файлов в библиотеке pdfjs-3.8.162-dist предназначены для поддержки
шрифтов и кодировок при отображении PDF-файлов. CMAP (Coded Character Mapping) - это набор
таблиц, которые связывают символы с их кодами, используемыми в различных кодировках.
В папке cmaps содержатся файлы с расширением ".bcmap", которые представляют собой сжатые
карты символов для разных языков и кодировок. Эти файлы используются библиотекой pdf.js для
правильного отображения текста в PDF-файлах на разных устройствах и с разными языками.
Когда вы открываете PDF-файл с помощью библиотеки pdf.js, она автоматически загружает
соответствующий файл cmap для правильного отображения символов и текста на экране. Это
позволяет библиотеке правильно интерпретировать и отображать текст, независимо от
используемой кодировки или языка.
Папка build.
⦁ Файл pdf.js – основной файл библиотеки, который предоставляет возможность отображать и взаимодействовать с PDF-файлами веб-страницы. Он выполняет рендеринг PDF-документов и обеспечивает функциональность, такую как масштабирование, навигация по страницам, поиск и так далее. Этот файл является ключевым для работы с PDF-файлами в браузере.
⦁ Файл pdf.js.map – файл карты исходного кода (source map) для pdf.js. Карты исходного кода используются для отображения связи между минифицированным (сжатым) JavaScript-кодом и его исходным кодом. Они позволяют разработчикам отлаживать исходный код, который был сжат в процессе оптимизации для более эффективной передачи по сети.
⦁ Файл pdf.worker.js – отвечает за обработку PDF-документов в фоновом режиме. Он выполняет интенсивные вычислительные задачи, такие как разбор и обработка содержимого PDF-файлов, а также подготовку данных для отображения в файле pdf.js. Программный код pdf.worker.js позволяет ускорить загрузку и обработку документа PDF, освобождая основной поток выполнения браузера.
⦁ Файл pdf.worker.js.map – файл карты исходного кода для pdf.worker.js. Файл pdf.worker.js содержит код, который выполняется в отдельном рабочем потоке (worker) для обработки операций с PDF-файлами. Карта исходного кода помогает разработчикам отлаживать этот код.
⦁ Файл pdf.sandbox.js – файл JavaScript, который содержит код для запуска песочницы (sandbox) PDF.js. Песочница используется для безопасного выполнения кода, загруженного из PDF-файлов, чтобы предотвратить возможные уязвимости и атаки.
⦁ Файл pdf.sandbox.js.map – файл карты исходного кода для pdf.sandbox.js. Он аналогичен pdf.js.map и используется для отображения связи между минифицированным кодом pdf.sandbox.js и его исходным кодом.
Примечание.
Удалять целиком какой-то файл из этой сборки я не рекомендую. Немного изменить, приспособить
под свой интерес, это да. К примеру, если удалить весь перевод на иностранные языки и
оставить только на русском, то игра не стоит свеч. Эти файлы небольшого размера, весят мало.
Пусть лежат.
Что делать дальше, чтобы отобразить документ pdf на странице сайта?
Использовал планшет с Android. Поступил так:
1. Открыл файл viewer.html в браузере из файлового менеджера с такой иконкой. Дополнено 24.03.2024: после обновления приложения, оно перестало полноценно открывать html в браузере. Используйте для открытия редактор html из пункта 2.
Посмотрел. Во встроенном просмотрщике отображается тестовый PDF – compressed.tracemonkey-pldi-09.pdf
2. Открыл файл viewer.html в редакторе html. Возможно использовать любой редактор html. Мною выбран
Добавил в viewer.html шапку, подвал, 2 кнопки от сайта NewLAN60.ru Результат изменений лучше не просматривать самом редакторе, так как он даёт черный фон страницы. В браузере фон серый. Видимо, особенность приложения.
3. Этот же редактор html может работать со скриптами. Открываем в нём файл viewer.js В правом верхнем углу приложения находится меню. Выбираем в меню редактора 'Поиск'. Через поиск находим в viewer.js строку, где прописан тестовый документ PDF compressed.tracemonkey-pldi-09.pdf Это строка 3184 скрипта. Заменяем название на свой документ. В моём случае на Tsikl-for.pdf Сохраняем изменения.
4. Заходим в папку web. Удаляем ненужный теперь compressed.tracemonkey-pldi-09.pdf и помещаем туда Tsikl-for.pdf
5. Вновь смотрим viewr.html в браузере для проверки. Будет открыт документ с заголовком 'Цикл for. JavaScript.' Этот шаблон страницы сайта, частично отредактированных файлов, в виде zip, предлагаю для скачивания(5.23MB) Здесь1. Обратите внимание, что если вы воспользуетесь шаблоном, то в файле viewer.js теперь нужно искать Tsikl-for.pdf и заменить на своё название документа.
6. Далее, мне нужно было отправить 484 файла на сервер. Рекомендую снова создать из изменённых файлов zip. Для этого воспользовался бесплатной программой RAR. Загрузить можно из Google Play. Вообще, для Android все 3 программы бесплатные.
7. На сервере zip разархивировал за счёт программы сервера. Для этого достаточно кликнуть на файл и выбрать соответствующее действие.
8. Осталось только проверить. Хочу отметить, что страница приспособлена для мобильных устройств. Она нормально открывается, не вылезая за пределы экрана, шириной 350px(пикселей).
Так можно открыть практически любой PDF. Пробовал документ с 2059 страницами. Задержка при отображении есть, но она допустимая.
Примечание.
Кстати, о сервере. Хочу порекомендовать хостинговую компанию с хорошей технической поддержкой 24/7. Ведь обращаться всё равно приходится. Чтобы получить техпомощь, в личном кабинете заполняется несложный тикет(обращение, запрос). Далее разговор по электронной почте. В панель управления, то есть для работы с папками, файлами – отдельный вход. Что тоже удобно.
Если небольшой, статический сайт и панель управления 'DirectAdmin' оплата за месяц 99 руб. Доменное имя в зоне ru на год 210 руб. Предоставляется бесплатный сертификат безопасности, который нужно оформить самому, выполнив определённую последовательность действий. Здесь могут возникнуть трудности, но преимущества у компании есть.
Статический сайт – значит, можно использовать при создании страниц html, css, javascript. Нельзя php. Пример, этот сайт NewLAN60.ru является статическим сайтом.
Более подробно об этих и других предоставляемых услугах Здесь2.
Исполнение сказанного на 2 странице.