Как добавить предпросмотр документов на сайт uCoz через Google Docs и Microsoft

Как добавить предпросмотр документов на сайт uCoz через Google Docs и Microsoft Office

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

Чтобы посетитель мог просмотреть документ прямо на сайте, можно использовать внешний просмотрщик Google Docs Viewer или Microsoft Office Online. Документ будет загружаться внутри страницы через элемент iframe.

В статье рассмотрим два способа подключения предпросмотра документов на сайте uCoz.

Что потребуется для работы предпросмотра

Файл должен быть доступен по прямой публичной ссылке.

Для корректной работы просмотрщика необходимо, чтобы:

• файл существовал на сайте;
• ссылка открывалась без авторизации;
• для открытия файла не требовался пароль;
• сайт работал по протоколу HTTPS;
• доступ к файлу не был ограничен для отдельных групп пользователей;
• внешний сервис Google или Microsoft мог загрузить файл с сайта.

В шаблонах uCoz прямой путь к прикреплённому файлу можно получить с помощью системного кода:

$FILE_DIRECT_URL$

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

/_ld/125/12501_document.docx

Для передачи документа внешнему просмотрщику нужно сформировать полный адрес файла:

https://testsite.ucoz.net$FILE_DIRECT_URL$

В примерах статьи используется тестовый адрес:

https://testsite.ucoz.net

Его необходимо заменить на полный адрес своего сайта.

Общий код оформления просмотрщика

Сначала добавьте в шаблон страницы материала следующий HTML код:

<div class="document-preview"> <div class="document-preview__header"> <div class="document-preview__icon"> <svg width="26" height="26" viewBox="0 0 24 24" fill="none" aria-hidden="true"> <path d="M6 2H14L19 7V22H6V2Z" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"> </path> <path d="M14 2V7H19" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"> </path> <path d="M9 12H16" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"> </path> <path d="M9 16H16" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"> </path> </svg> </div> <div class="document-preview__title"> <div class="document-preview__name"> Предпросмотр документа </div> <div class="document-preview__description"> Документ можно просмотреть прямо на странице </div> </div> <a class="document-preview__download" href="https://testsite.ucoz.net$FILE_DIRECT_URL$" target="_blank" rel="noopener"> Скачать </a> </div> <div class="document-preview__body"> <div class="document-preview__loader" id="document-preview-loader"> <div class="document-preview__spinner"></div> <div class="document-preview__loader-text"> Загружаем документ... </div> </div> <iframe id="document-preview-frame" class="document-preview__frame" src="about:blank" frameborder="0" allowfullscreen title="Предпросмотр документа"> </iframe> </div> <div class="document-preview__footer"> Если документ не отображается, <a href="https://testsite.ucoz.net$FILE_DIRECT_URL$" target="_blank" rel="noopener"> откройте или скачайте его </a>. </div></div>

После HTML кода добавьте стили:

<style>.document-preview { width: 100%; margin: 24px 0; overflow: hidden; background: #ffffff; border: 1px solid #e3e8ef; border-radius: 16px; box-shadow: 0 8px 30px rgba(31, 45, 61, 0.08); font-family: Arial, Tahoma, sans-serif;}.document-preview__header { display: flex; align-items: center; gap: 14px; padding: 18px 20px; background: linear-gradient(135deg, #f8fbff 0%, #eef5fc 100%); border-bottom: 1px solid #e3e8ef;}.document-preview__icon { display: flex; align-items: center; justify-content: center; flex: 0 0 46px; width: 46px; height: 46px; color: #2f6fae; background: #ffffff; border: 1px solid #dbe6f1; border-radius: 12px; box-shadow: 0 4px 12px rgba(47, 111, 174, 0.08);}.document-preview__title { min-width: 0; flex: 1 1 auto;}.document-preview__name { margin-bottom: 4px; color: #1f2d3d; font-size: 17px; font-weight: 700; line-height: 1.3;}.document-preview__description { color: #6f7d8c; font-size: 13px; line-height: 1.4;}.document-preview__download { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 18px; color: #ffffff !important; background: #2f6fae; border-radius: 10px; text-decoration: none !important; font-size: 14px; font-weight: 700; transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;}.document-preview__download:hover { color: #ffffff !important; background: #245b91; transform: translateY(-1px); box-shadow: 0 6px 14px rgba(47, 111, 174, 0.22);}.document-preview__body { position: relative; width: 100%; min-height: 700px; background: #f4f6f8;}.document-preview__frame { display: block; width: 100%; height: 700px; border: 0; background: #ffffff;}.document-preview__loader { position: absolute; z-index: 2; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 14px; background: #f7f9fb; transition: opacity 0.3s ease, visibility 0.3s ease;}.document-preview__loader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none;}.document-preview__spinner { width: 38px; height: 38px; border: 4px solid #dbe5ef; border-top-color: #2f6fae; border-radius: 50%; animation: document-preview-spin 0.8s linear infinite;}.document-preview__loader-text { color: #607080; font-size: 14px; font-weight: 600;}.document-preview__footer { padding: 13px 20px; color: #6f7d8c; background: #ffffff; border-top: 1px solid #e3e8ef; font-size: 13px; line-height: 1.5; text-align: center;}.document-preview__footer a { color: #2f6fae; font-weight: 600; text-decoration: none;}.document-preview__footer a:hover { text-decoration: underline;}@keyframes document-preview-spin { to { transform: rotate(360deg); }}@media screen and (max-width: 768px) { .document-preview { margin: 16px 0; border-radius: 12px; } .document-preview__header { align-items: flex-start; flex-wrap: wrap; padding: 15px; } .document-preview__icon { flex-basis: 42px; width: 42px; height: 42px; } .document-preview__download { width: 100%; min-height: 42px; } .document-preview__body { min-height: 560px; } .document-preview__frame { height: 560px; } .document-preview__footer { padding: 12px 15px; }}</style>

После добавления общего HTML кода и стилей выберите один из двух вариантов загрузки документа.

Одновременно подключать оба варианта не нужно.

Способ 1. Предпросмотр через Google Docs Viewer

Google Docs Viewer получает прямую ссылку на файл и загружает документ внутри страницы.

Добавьте после HTML кода и стилей следующий скрипт:

<script>(function () { function initDocumentPreview() { var fileUrl = 'https://testsite.ucoz.net$FILE_DIRECT_URL$'; var viewerFrame = document.getElementById('document-preview-frame'); var loader = document.getElementById('document-preview-loader'); if (!viewerFrame) { return; } viewerFrame.src = 'https://docs.google.com/gview?url=' + encodeURIComponent(fileUrl) + '&embedded=true'; viewerFrame.addEventListener('load', function () { if (loader) { loader.classList.add('is-hidden'); } }); window.setTimeout(function () { if (loader) { loader.classList.add('is-hidden'); } }, 10000); } if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', initDocumentPreview); } else { initDocumentPreview(); }})();</script>

В коде замените адрес:

https://testsite.ucoz.net

на адрес своего сайта.

Такую же замену необходимо выполнить:

• в переменной fileUrl;
• в ссылке кнопки «Скачать»;
• в ссылке под окном предпросмотра.

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

Возможные особенности:

• документ может загружаться дольше обычного;
• отдельные файлы могут не открываться;
• просмотрщик может временно возвращать ошибку;
• результат может зависеть от доступности сервисов Google;
• внешний сервис может повторно загружать документ при каждом открытии страницы.

Это связано с работой Google Docs Viewer, а не с системным кодом $FILE_DIRECT_URL$.

Способ 2. Предпросмотр через Microsoft Office Online

Для документов Word, Excel и PowerPoint рекомендуется использовать Microsoft Office Online.

Вместо скрипта Google Docs Viewer добавьте следующий код:

<script>(function () { function initDocumentPreview() { var fileUrl = 'https://testsite.ucoz.net$FILE_DIRECT_URL$'; var viewerFrame = document.getElementById('document-preview-frame'); var loader = document.getElementById('document-preview-loader'); if (!viewerFrame) { return; } viewerFrame.src = 'https://view.officeapps.live.com/op/embed.aspx?src=' + encodeURIComponent(fileUrl); viewerFrame.addEventListener('load', function () { if (loader) { loader.classList.add('is-hidden'); } }); window.setTimeout(function () { if (loader) { loader.classList.add('is-hidden'); } }, 10000); } if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', initDocumentPreview); } else { initDocumentPreview(); }})();</script>

Замените тестовый адрес:

https://testsite.ucoz.net

на полный адрес своего сайта.

Microsoft Office Online подходит для следующих форматов:

• DOC;
• DOCX;
• XLS;
• XLSX;
• PPT;
• PPTX.

Для документов Microsoft Office этот вариант рекомендуется использовать в первую очередь.

Как проверить прямую ссылку на файл

Перед подключением просмотрщика откройте прямой адрес документа в новой вкладке браузера.

Например:

https://testsite.ucoz.net/_ld/125/12501_document.docx

Нормальными считаются два варианта:

• документ откроется в браузере;
• браузер предложит скачать документ.

Само предложение скачать файл не является ошибкой. Браузеры обычно не умеют самостоятельно отображать файлы DOC, DOCX, XLS, XLSX, PPT и PPTX, поэтому передают их на скачивание.

Главное, чтобы по указанному адресу действительно возвращался файл.

Если сервер возвращает ошибку 403 или 404, внешний просмотрщик также не сможет загрузить документ.

Почему документ может не отображаться

Проверьте следующие условия:

• файл существует на сайте;
• в адресе используется протокол HTTPS;
• прямая ссылка сформирована правильно;
• для открытия файла не требуется авторизация;
• доступ к файлу не ограничен для отдельных групп пользователей;
• в шаблоне подключён только один просмотрщик;
• в переменной fileUrl указан правильный домен;
• расширение файла соответствует его реальному содержимому;
• сайт не запрещает внешним сервисам получать файл;
• в адресе файла отсутствуют лишние пробелы и ошибочные символы.

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

Владелец сайта не может управлять:

• скоростью обработки документа;
• доступностью Google Docs Viewer;
• доступностью Microsoft Office Online;
• внешним видом встроенного просмотрщика;
• ограничениями, установленными Google или Microsoft.

Поэтому рядом с просмотрщиком желательно всегда оставлять прямую ссылку на скачивание документа.

Как изменить высоту окна предпросмотра

По умолчанию высота просмотрщика составляет 700 пикселей:

.document-preview__body { min-height: 700px;}.document-preview__frame { height: 700px;}

Чтобы увеличить окно, замените значение 700px, например, на 900px:

.document-preview__body { min-height: 900px;}.document-preview__frame { height: 900px;}

Высота для мобильных устройств задаётся отдельно внутри медиазапроса:

.document-preview__body { min-height: 560px;}.document-preview__frame { height: 560px;}

Какой способ выбрать

Для файлов DOC, DOCX, XLS, XLSX, PPT и PPTX лучше использовать Microsoft Office Online.

Google Docs Viewer можно использовать как альтернативный или более универсальный вариант, но он периодически может работать нестабильно.

Рекомендуемый выбор:

• для документов Microsoft Office используйте Microsoft Office Online;
• Google Docs Viewer используйте как запасной вариант;
• не подключайте оба просмотрщика одновременно;
• обязательно сохраняйте кнопку скачивания исходного файла;
• перед установкой проверяйте прямую ссылку на документ.

Заключение

Предпросмотр документов на сайте uCoz можно добавить без установки дополнительных библиотек и устаревших скриптов.

Для этого достаточно:

• получить прямую ссылку через $FILE_DIRECT_URL$;
• добавить к ней домен сайта;
• разместить HTML код просмотрщика;
• подключить стили;
• выбрать Google Docs Viewer или Microsoft Office Online.

Даже при наличии предпросмотра рекомендуется сохранять кнопку скачивания. Если внешний сервис временно окажется недоступен, посетитель всё равно сможет открыть исходный документ.