Встроенные предпросмотры PDF

:discourse2: Краткое описание Встроенные превью PDF — это компонент темы, работающий только на настольных компьютерах, который позволяет создавать превью для вложений в формате PDF.
:eyeglasses: Предпросмотр Предпросмотр в конструкторе тем Discourse (только для настольных компьютеров)
:hammer_and_wrench: Ссылка на репозиторий https://github.com/discourse/discourse-pdf-previews
:open_book: Новичок в темах Discourse? Руководство для начинающих по использованию тем Discourse

Установить этот компонент темы

Возможности

до

после

Как упоминалось выше, этот компонент работает только на настольных компьютерах. Показывать превью на мобильных устройствах практически бессмысленно, поскольку всё будет слишком маленьким и очень трудным для чтения.

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

Также обратите внимание, что по умолчанию в Discourse загрузка PDF-файлов запрещена. Если вы хотите разрешить пользователям загружать PDF-файлы, добавьте это расширение либо в authorized_extensions, чтобы разрешить загрузку всем пользователям, либо в authorized_extensions_for_staff, если хотите ограничить это только сотрудниками.

:information_source: При использовании S3 также может потребоваться обновить политику CORS. См. сообщение ниже: Inline PDF Previews - #106 by JammyDodger

Как это использовать?

  1. Установите компонент
  2. Разрешите загрузку PDF-файлов
  3. Обновите страницу
  4. Загрузите PDF-файл

Всё. Остальное должно работать автоматически.

Настройки

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

Новая вкладка: Ссылки на вложения PDF будут открывать пользователя в новой вкладке, где будет отображаться PDF

Дополнительные возможности

Если вы хотите, чтобы отдельный PDF-файл не отображался встроенно, просто добавьте пробел перед именем файла — например:

Это будет отображаться встроенно

[sample-pdf.pdf|attachment](upload://usvbcKiQSWqA3w10gnf5PtydiXR.pdf) (82.9 KB)

Это не будет отображаться встроенно

[ sample-pdf.pdf|attachment](upload://usvbcKiQSWqA3w10gnf5PtydiXR.pdf) (82.9 KB)

:discourse2: Размещено нами? Компоненты тем доступны для использования на наших тарифных планах Standard, Business и Enterprise.

68 лайков

Я размещаю свои загрузки и изображения на S3, но предпросмотр блокируется ошибкой «CORS policy: No ‘Access-Control-Allow-Origin’ header is present».

Ниже приведено сообщение из консоли Chrome:

Access to fetch at 'https://travelmassive-discourse-cdn.s3.dualstack.us-west-1.amazonaws.com/original/2X/b/b578f6364592121964e6a2fd4969e5c1222bd909.pdf' (redirected from 'https://lounge.travelmassive.com/uploads/short-url/pTnA3r043WfhDK8HSdPQrtNn8Lf.pdf') from origin 'https://lounge.travelmassive.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Обновление

Мне удалось решить эту проблему, добавив следующую политику CORS в конфигурацию моего ведра S3.

<CORSConfiguration>
 <CORSRule>
   <AllowedOrigin>https://mydiscourse.url/</AllowedOrigin>
   <AllowedMethod>GET</AllowedMethod>
   <AllowedHeader>*</AllowedHeader>
   <ExposeHeader>Access-Control-Allow-Origin</ExposeHeader>
 </CORSRule>
</CORSConfiguration>
2 лайка

Необходимо добавить, что если вы видите этот текст в сообщении об ошибке from origin 'https://lounge.travelmassive.com' has been, где ваш домен указан без косой черты / в конце, то в конфигурации CORS также следует добавить ваш домен без косой черты в конце, например:
https://mydiscourse.url

1 лайк

Я заметил, что ваши загрузки размещены на AWS, поэтому проблема, скорее всего, связана с CORS (компонент не активен на вашем сайте, чтобы я мог это подтвердить). См. пост ниже вашего.

Спасибо, что поделились этим!

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

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

Я немного не уверен, что здесь произошло. В обоих случаях у меня всё работает каждый раз, когда я проверяю. Можно списать это на временную сетевую проблему, но, пожалуйста, дайте знать, если вы столкнётесь с этим снова :+1:

Я выпустил небольшое обновление этого компонента, которое должно улучшить восприятие загрузки: теперь вместо стилей Iframe по умолчанию отображается плейсхолдер на основе theme-color. Он появляется только во время загрузки файла, поэтому в 99% случаев вы даже не заметите его.

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

9 лайков

Возможно ли сделать предпросмотр PDF подавляемым, если добавлять пробел перед ссылкой на загрузку, как в случае с oneboxing? Иногда нужен список документов без предпросмотров, а иногда — с предпросмотрами.

9 лайков

Я использую Safari на MacOS Catalina, и у меня ничего не отключает отображение PDF в браузере — например, http://www.orimi.com/pdf-test.pdf открывается нормально. Но при просмотре предварительного просмотра в theme-creator я всё ещё получаю окно/сообщение «Блокировка плагина».

Настройки для конкретного сайта в предпочтениях Safari ничем не отличаются от настроек для других сайтов.

Случается ли это у кого-то ещё?

3 лайка

У меня всё ещё не работает в Safari на macOS Big Sur. Никаких специальных настроек для плагинов блога, и другие PDF-файлы отображаются в браузере.

В веб-инспекторе Safari при загрузке страницы предпросмотра в theme-creator появляются следующие сообщения об ошибках:
Неизвестная директива Content-Security-Policy 'worker-src'.
Загрузка blob:https://theme-creator.discourse.org/7b9b62c7-e782-4080-a521-04e3b06aa142 отклонена, так как она не указана в директиве object-src политики безопасности контента.

3 лайка

Это было бы огромным улучшением для этого компонента! Реально ли это реализовать, @Johani?

5 лайков

У меня та же проблема в Firefox, но только после второго посещения :wink:
Есть ли какое-то обходное решение? Возможно, ручное объявление в конфигурации CSP?

Спасибо

1 лайк

На моём сайте это перестало работать. Вместо предварительного просмотра PDF появляется большой чёрный прямоугольник:

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

Это произошло после переноса загрузки изображений и файлов в S3, что может быть причиной проблемы. Надеюсь, что нет, потому что вернуть их обратно будет непросто!

Я в тупике. Жаль, ведь это отличный компонент. Есть какие-нибудь предложения?

2 лайка

Я наблюдаю то же поведение при включённой загрузке в S3.

3 лайка

Вы всё ещё можете загрузить PDF?
У меня всё ещё работает (s3 + защищённый медиа-контент и без CDN) :thinking:

1 лайк

Да, мы можем. У нас такая же настройка, как у вас (думаю).

1 лайк

:thinking:

  • мои ссылки в сообщениях имеют вид domain/secure-media-uploads/original/...
  • но в консоли/сети я вижу, что фактические загрузки идут из бакета
    Вы видите учётные данные amz?

Если нет, возможно, это поможет?

Также я помню, что при попытке переместить пост из категорий (или, может быть, это было копирование/вставка?) происходило что-то странное. В итоге всё сработало, когда я повторно загрузил файл.

1 лайк

Я наблюдаю такое же поведение на чистой установке Discourse и с новым вложением PDF.

3 лайка

Спасибо, @Benjamin_D. Оказывается, у меня не включена защищённая загрузка файлов, но все мои ссылки выглядят нормально и работают, например эта:

The HiNZ eHealth Forum - trusted online digital health discussion

Так что я в тупике — особенно непонятно, почему это работает на двух форумах, которые я веду, а на третьем нет. Единственное отличие — использование S3. И то, что у вас это работает с S3. Я действительно в замешательстве.

1 лайк

После обновления до последней версии Discourse вложения PDF больше не отображаются. В чём может быть проблема?

1 лайк

Это может быть конфликт с другим компонентом или темой. У меня всё работает как ожидалось. Начните с отключения других компонентов и попробуйте использовать тему по умолчанию, если у вас установлена другая. То же самое касается плагинов.

3 лайка

Хорошо — я добился прогресса. Отключение загрузки в S3 решает проблему для новых загрузок. Но в этом случае у меня остаётся хаос с S3 и локальным хранилищем!

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

позже — нет, CDN ничего не меняет.

гораздо позже — успешно удалил загрузки через S3 (с немалым трудом), так что теперь всё в порядке.

Теперь я хочу улучшить это! Есть ли среди вас умные люди с нужными навыками, которые хотели бы попробовать?

4 лайка

Я ищу плагин, который позволяет открывать PDF-файлы в новой вкладке.
В настоящее время мой Discourse позволяет только скачивать файлы.
Возможно ли это реализовать с помощью похожего темы?

5 лайков