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

[Alon1 (Alon)]

Попробовал это: установил cors origins в значение https://xxxxx.s3.us-east-2.amazonaws.com, а также добавил DISCOURSE_ENABLE_CORS: true в файл /var/discourse/containers/app.yml, но это не работает.

[tobiaseigen]

А вы выполнили команду ./launcher rebuild app после внесения изменений в app.yml? Возможно, вам также потребуется выполнить полную перезагрузку страницы в браузере.

[tobiaseigen]

Кстати, проверьте раздел «Файлы» в настройках администратора — возможно, вы изменили параметры, влияющие на эту функцию. Также, полагаю, что эта функция не будет работать, если вы ссылаетесь на PDF-файл, размещённый на другом сервере. Я только что протестировал это на своём сайте: тот же PDF-файл, размещённый удалённо, не показал предпросмотр.

Сообщите, если обнаружите источник проблемы!

Пример разметки поста, где удалённая ссылка не сработала, а загруженный локально файл — сработал.

remote: 

[test remote pdf](https://jsoncompare.org/LearningContainer/SampleFiles/PDF/sample-pdf-with-images.pdf)

uploaded locally: 

[sample-pdf-with-images.pdf|attachment](upload://uOJLgHidEXnbqPRn2p6yP10ecQU.pdf) (3.8 MB)

Как это выглядит:

[Alon1 (Alon)]

@tobiaseigen

Вы выполнили команду ./launcher rebuild app после внесения изменений в app.yml? Возможно, вам также потребуется выполнить жесткую перезагрузку страницы в браузере.

Да, но это не помогло.

Когда вы включаете S3 в Discourse

то по определению файлы хранятся на другом домене.
Думаю, это проясняет проблему. Но я всё ещё надеюсь, что плагин можно будет адаптировать для поддержки установок Discourse с включённым S3.

[tobiaseigen]

Я не очень хорошо знаком с этой конфигурацией. Вы следовали этим инструкциям?

Configure an S3 compatible object storage provider for uploads

This topic covers how to configure some common S3 compatible Object Storage providers (S3 clones). See Set up file and image uploads to S3 for more details about Amazon AWS S3 configuration, which is officially supported and used internally by Discourse for our hosting services. Provider Service Name Works with Discourse? Amazon AWS S3 Yes Digital Ocean Spaces Yes Linode Object Storage Yes Google Cloud Storage Yes Scaleway Object Storage Yes Vultr Obj…

[Alon1 (Alon)]

Да, у меня S3 (и связанная настройка «secure media») работает уже несколько лет без проблем.
Не работает только компонент Inline PDF с этой настройкой.

Для справки: даже настройка app.yml таким образом:

DISCOURSE_ENABLE_CORS: true
DISCOURSE_CORS_ORIGIN: ‘*’

не помогает

[nathank (Nathan Kershaw)]

@Alon

Да, у меня S3 (и связанная настройка «защищённые медиа») работает уже несколько лет без проблем.

Я тоже столкнулся с этой же проблемой и в итоге отказался от загрузки в S3, чтобы заставить этот TC работать, так как он для нас очень важен:

Inline PDF Previews

Ok - I’ve made progress. Disabling S3 uploads fixes it for new uploads. But I’m left with a S3 / local mess if I go down that road! If could be that I am not using the CDN thingo (CloudFront) which throws up the annoying errors on the admin page. I’ll have a crack setting that up and see if that works. later - nope, a CDN makes no difference. much later - have removed S3 uploads successfully (with a bit of sweat) so all good now. Now, I’m keen to improve it! Is any clever person with the sk…

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

[Alon1 (Alon)]

@nathankershaw

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

Думаю, никто не станет с этим спорить.
Скорее всего, дело в осведомлённости и приоритетах.
Что касается «осведомлённости», то, возможно, @Johani, автор темы, мог бы добавить небольшую заметку в тему обсуждения о том, что компонент встроенного PDF не работает при включённой поддержке S3.
Это сэкономило бы время другим пользователям на устранение неполадок и повысило бы осведомлённость о проблеме.

[JammyDodger]

В этих постах, которые я выловил из авто-таймера, есть немного информации об S3, если это поможет?

@Ian C

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

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

@Ed

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

[Alon1 (Alon)]

Да, это работает
Для справки, если кому-то ещё это понадобится:

1. Перейдите в консоль AWS, раздел Buckets, по ссылке https://s3.console.aws.amazon.com/s3/buckets и выберите бакет, использовавшийся для установки Discourse.

2. Перейдите на вкладку Permissions.
   

3. Прокрутите вниз до раздела “Cross-origin resource sharing (CORS)” и вставьте:

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET"
        ],
        "AllowedOrigins": [
            "https://my-site.com"
        ],
        "ExposeHeaders": []
    }
]

Это должно выглядеть так:

[nathank (Nathan Kershaw)]

Жаль, что я не нашел этого, пока еще работал с загрузками в S3!

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

[JammyDodger]

@nathankershaw

Возможно, стоит вернуться к этому сейчас. @JammyDodger, интересно, стоит ли отметить это и в S3, и в этом первом посте, чтобы другие не споткнулись об это.

Абсолютно верно. Я просто ждал подтверждения, что это сработало, прежде чем подумать о том, как лучше внести правку.

[Ralf_Stockmann]

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

a) сделать PDF-iframe изменяемым по размеру? Я уже пробовал это сделать с помощью CSS, но безрезультатно — лежащая в основе сетка, похоже, мешает.
b) добавить вторую ссылку «открыть в новой вкладке» рядом со ссылкой на скачивание? Я очень не хочу скачивать слишком много файлов с нашего форума.

[nathank (Nathan Kershaw)]

@Ральф Штокман

b) добавить вторую ссылку «открыть в новой вкладке» рядом со ссылкой на загрузку? Я очень не хочу скачивать слишком много вещей с нашего форума.

Это было бы значительным улучшением! И, думаю, добавить это не должно составить большого труда. Если у меня найдётся время в ближайшие дни, я, возможно, попробую сделать pull request для этого.

[tobiaseigen]

Я думаю, что вариант (b) уже предусмотрен, например, встроенный просмотр или открытие в новой вкладке. Возможно, стоит добавить третий вариант, позволяющий пользователям и просматривать встроенно, и открывать в новой вкладке? Мне тоже нравится эта идея.

Вариант (a) может быть сложным, учитывая, как трудно добиться правильного отображения элементов в публикации.

[Alon1 (Alon)]

Я был бы рад увидеть кнопку разворачивания

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

[denvergeeks]

@Ralf_Stockmann и @Alon1, вы пробовали…

IFrame Lightboxes

This is a theme component that adds the ability to open iFrames in lightboxes. Samples This component adds an “expand” button on top of the iframes you enable it on. [expand button] Clicking the button will open the iframe in fullscreen in a lightbox. [full screen iframe lightbox] Clicking either the dark area around the iframe or the x at the top right corner closes the lightbox. The same way it works for default image lightboxes. Settings There’s only one setting. You add the domains…

Также на моём Discourse я использую этот метод…

Вставка PDF из Google Drive

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

1. Поделиться
2. Скопировать ссылку для обмена
3. Открыть ссылку для обмена в новой вкладке
4. Нажмите на три вертикальные точки в правом верхнем углу
5. Выберите «Встроить элемент»
6. Скопируйте отображаемый код iFrame
7. Вставьте его в редактор Discourse

Ниже встроен тестовый PDF-файл из Google Drive, который вы можете << скачать здесь >>

<iframe src="https://drive.google.com/file/d/1KQ-jn7R0NmZxw955QaPu3lvLFh5zpnDe/preview" width="640" height="480" allow="autoplay"></iframe>

Вот как это выглядит… (что вы также можете проверить в реальном времени ЗДЕСЬ на моём сайте)

[Alon1 (Alon)]

Отлично!
Просто (1) установите компонент темы IFrame Lightboxes и (2) добавьте URL вашего сайта в список «доменов origin iframe» в настройках компонента — и всё работает! Кнопка разворачивания появляется прямо над правым верхним углом встроенного PDF-файла.

Работает сразу из коробки

[thoka (Thomas Kalka)]

Так как я всё ещё не мог открывать PDF-файлы в новой вкладке, я написал небольшой плагин, который обслуживает все локальные PDF-файлы с заголовком content-disposition: inline:

GitHub - thoka/discourse-send-pdf-inline: Patch discourse do serve PDFs inline