인라인 PDF 미리보기

그렇게 해 봤는데, cors origins를 https://xxxxx.s3.us-east-2.amazonaws.com으로 설정했고, /var/discourse/containers/app.yml 파일에도 DISCOURSE_ENABLE_CORS: true를 설정했는데도 작동하지 않습니다.

1개의 좋아요

app.yml 파일을 수정한 후 ./launcher rebuild app를 실행하셨나요? 브라우저의 하드 리프레시도 필요할 수 있습니다.

2개의 좋아요

참고로, 관리자 설정의 파일 섹션을 확인하여 이 기능에 영향을 미치는 설정을 변경했는지 살펴보세요. 또한 다른 서버에 호스팅된 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)

표시되는 모습:

3개의 좋아요

네, 실행했지만 작동하지 않았습니다.

Discourse에서 S3를 활성화하면


정의상 파일은 다른 도메인에 저장됩니다.
이것이 문제를 해결해 주는 것 같습니다. 하지만 여전히 S3가 활성화된 Discourse 설치 환경에서도 플러그인이 지원되도록 만들어지기를 바랍니다.

2개의 좋아요

이 구성에 대해 잘 알지 못합니다. 해당 지침을 따르셨나요?

1개의 좋아요

네, S3(그리고 관련 있는 “secure media” 설정)는 지난 몇 년간 문제없이 작동하고 있습니다.
문제는 이 설정과 함께 Inline PDF 컴포넌트만 작동하지 않는다는 점입니다.

참고로 app.yml을 다음과 같이 설정해도

DISCOURSE_ENABLE_CORS: true
DISCOURSE_CORS_ORIGIN: ‘*’

도움이 되지 않습니다.

2개의 좋아요

저도 정확히 같은 문제에 부딪혔고, 이 TC가 우리에게 매우 중요한 가치가 있기 때문에 결국 S3 업로드를 되돌려서 이 TC를 작동하게 했습니다:

이것이 #official이고 S3 업로드가 권장되는 만큼, S3와 함께 작동하도록 만들 수 있는지 살펴봐야 한다고 생각합니다. PDF가 S3 업로드에서 특별히 제외되어 있는 것일 수도 있지만, 그렇게 되면 큰 문제가 될 것입니다. 왜냐하면 일부 파일은 용량이 매우 크기 때문이죠!

6개의 좋아요

누가 반대할 거라고 생각하지 않습니다.
인식 문제와 우선순위 문제일 거라고 추측합니다.
적어도 “인식” 측면에서는, 해당 토론 주제의 OP인 @Johani 님이 인라인 PDF 구성 요소가 S3가 활성화된 경우 작동하지 않는다는 작은 주석을 추가해 주시면 좋겠습니다.
그렇게 하면 다른 사람들이 문제를 해결하는 데 드는 시간을 절약할 수 있고, 해당 문제에 대한 인식을 높일 수 있습니다.

3개의 좋아요

자동 타이머에서 꺼낸 이 게시물들에 S3에 대한 정보가 조금 있습니다. 도움이 될까요?

7개의 좋아요

게시물이 기존 주제에 병합되었습니다: Theme-Component Topics project

네, 작동합니다 :smiley:
다른 분들이 필요하신 경우를 위해 참고용으로 공유합니다:

  1. AWS 콘솔의 버킷 https://s3.console.aws.amazon.com/s3/buckets으로 이동하여 Discourse 설치에 사용된 버킷을 선택하세요.

  2. ‘Permissions’(권한) 탭을 선택하세요.
    image

  3. “Cross-origin resource sharing (CORS)” 섹션으로 스크롤을 내리고 다음 내용을 입력하세요:

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

이렇게 보여야 합니다:

11개의 좋아요

S3 업로드를 하던 중에 그걸 알았으면 좋았을 텐데!!

이제 다시 살펴봐야 할 것 같아. @JammyDodger, 다른 사람들이 이 문제로 헤매지 않도록 S3 쪽과 이 OP(원문) 양쪽에 해당 내용을 명시해 두는 게 좋을 것 같아.

5개의 좋아요

전적으로 동의합니다. :+1: 작동하는지 확인을 기다리고 있었는데, 이제 어떻게 편집하는 것이 최선인지 고민하고 있었거든요. :slightly_smiling_face:

7개의 좋아요

같은 문제를 해결하기 위한 두 가지 아이디어: 디스커스의 뷰포트가 상당히 좁아서 대부분의 PDF를 인라인으로 읽기에는 너무 작습니다. 이를 해결하기 위해 다음과 같은 방법을 사용할 수 있습니다.

a) PDF iframe의 크기를 조정 가능하게 만드는 것은 어떨까요? 이미 CSS로 시도해 보았지만 효과가 없었습니다 - 기본 그리드가 방해가 되는 것 같습니다.
b) 다운로드 링크 외에 새 탭에서 열기라는 두 번째 링크를 제공하는 것은 어떨까요? 포럼에서 너무 많은 파일을 다운로드하는 것을 매우 꺼려합니다.

5개의 좋아요

이것은 큰 개선이 될 것입니다! 그리고 추가하기가 그렇게 어렵지 않을 것 같습니다. 앞으로 며칠 안에 시간이 나면 이 부분에 대한 PR을 시도해 볼 수도 있습니다.

4개의 좋아요

개인적으로 (b)는 이미 인라인과 새 탭에서 열기 같은 옵션으로 제공되고 있는 것 같습니다. 아마도 사용자가 인라인으로 보고 새 탭에서도 열 수 있는 세 번째 옵션을 추가하는 건 어떨까요? 저도 이 아이디어를 좋아합니다.

(a)는 게시글에서 원하는 대로 스타일을 맞추는 것이 얼마나 어려운지 고려할 때, 구현이 쉽지 않을 수 있습니다.

3개의 좋아요

도구 모자에

같은 확장 버튼이 있어 인라인이 아닌 전체 화면으로 PDF를 표시할 수 있으면 좋겠습니다.

3개의 좋아요

@Ralf_Stockmann님과 @Alon1님, 아래 방법을 시도해 보셨나요?

또한, 제 Discourse에서는 이 방법을 사용하고 있습니다…

Google Drive에서 PDF 임베드

(이것이 제 선호하는 방법입니다. PDF가 iFrame 내에서 반응형으로 표시되도록 하기 위함입니다 - 다른 방법들은 크로스 브라우저 반응형 처리에서 대부분 실패합니다.)

  1. 공유
  2. 공유 링크 복사
  3. 공유 링크를 새 탭에서 열기
  4. 오른쪽 위 세로로 된 세 점 아이콘 클릭
  5. 항목 임베드 선택
  6. 표시된 iFrame 코드 복사
  7. Discourse 편집기에 붙여넣기

아래에는 Google Drive에 있는 테스트 PDF가 임베드되어 있으며, << 여기서 다운로드 >>할 수 있습니다.

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

이렇게 보입니다… (제 사이트에서 여기에서 라이브로 직접 테스트해 볼 수도 있습니다)

3개의 좋아요

정말 좋습니다!
(1) IFrame Lightboxes 테마 컴포넌트를 설치하고 (2) 컴포넌트 설정의 “iframe origin domains” 목록에 내 웹사이트 URL을 추가하기만 하면 됩니다! PDF 인라인의 오른쪽 위 모서리 바로 위에 확장 버튼이 추가됩니다.

바로 사용 가능합니다 :slight_smile:

4개의 좋아요

아직 새 탭에서 PDF를 열 수 없어서, 모든 로컬 PDF를 content-disposition: inline으로 제공하기 위한 작은 플러그인을 작성했습니다:

4개의 좋아요