인라인 PDF 미리보기

[Discourse]

	요약	인라인 PDF 미리보기는 데스크톱 전용 테마 컴포넌트로, PDF 첨부 파일의 미리보기를 생성할 수 있게 해줍니다.
	미리보기	Discourse Theme Creator에서 미리보기 (데스크톱 전용)
	레포지토리 링크	https://github.com/discourse/discourse-pdf-previews
	Discourse 테마가 처음이신가요?	Discourse 테마 사용 입문가이드

이 테마 컴포넌트 설치

이 컴포넌트는 Discourse 팀이 유지 관리하는 #공식 테마 컴포넌트이므로, #지원, #기여:버그, #기여:UX 및 #기여:기능 요청은 Meta의 해당 카테고리에서 적절한 테마 컴포넌트 태그와 함께 게시할 수 있습니다. 아래 링크를 클릭하여 게시물을 시작하세요.

 지원  버그  UX  기능

기능

전

후

위에서 언급했듯이, 이 컴포넌트는 데스크톱에서만 작동합니다. 모바일에서는 모든 것이 너무 작아 읽기가 매우 어렵기 때문에 미리보기를 표시할 이점이 거의 없습니다.

이 컴포넌트는 PDF를 렌더링하기 위해 브라우저의 네이티브 구현을 사용하므로, 브라우저에 따라 결과가 다르게 보일 수 있습니다.

또한, Discourse에서는 기본적으로 PDF 업로드가 허용되지 않습니다. 사용자가 PDF 파일을 업로드할 수 있도록 하려면, 모든 사용자에게 PDF 업로드를 허용하려면 authorized_extensions에 해당 확장자를 추가하거나, 스태프 멤버로 제한하려면 authorized_extensions_for_staff에 추가해야 합니다.

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)

우리가 호스팅하고 있나요? 테마 컴포넌트는 Standard, Business, Enterprise 플랜에서 사용할 수 있습니다.

[travelvc (Ian C)]

업로드 파일과 이미지를 S3에 호스팅하고 있는데, 미리보기가 "CORS 정책: ‘Access-Control-Allow-Origin’ 헤더가 존재하지 않습니다"라는 오류로 차단되고 있습니다.

아래는 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.

업데이트

S3 버킷 설정에 아래 CORS 정책을 추가하여 이 문제를 해결했습니다.

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

[Ed_Bobkov (Ed)]

@travelvc

<AllowedOrigin>https://mydiscourse.url/</AllowedOrigin>

오류 메시지에 from origin 'https://lounge.travelmassive.com' has been라는 텍스트가 표시되고, 도메인 끝에 슬래시(/)가 없는 경우를 보신다면, CORS 설정에도 슬래시 없이 도메인을 추가해야 합니다. 다음과 같이요:
https://mydiscourse.url

[Johani (Joe)]

@Jeremie_Leroy

다른 플러그인과 충돌 때문일까요?

업로드가 AWS에 있다는 것을 확인했습니다. 따라서 문제는 아마도 CORS와 관련이 있을 것입니다(확인할 수 있도록 해당 구성 요소가 제 사이트에서 비활성 상태입니다). 아래에 있는 게시물을 참고해 주세요.

@travelvc

S3 버킷 설정에 다음 CORS 정책을 추가하여 이 문제를 해결할 수 있었습니다.

@Ed_Bobkov

에러 메시지에서 from origin 'https://lounge.travelmassive.com' has been이라는 텍스트를 보게 되는데, 이때 도메인 끝에 슬래시(/)가 없다면 추가해야 합니다.

공유해 주셔서 감사합니다!

참고로 이 문제는 S3와 유사한 것을 설정한 셀프 호스터에게만 영향을 미칩니다. S3를 사용하지 않는 셀프 호스터는 이 문제에 직면하지 않습니다. CDCK에 의해 호스팅되는 고객도 이미 해당 설정이 되어 있어 걱정할 필요가 없습니다.

그러나 CORS 설정은 이 주제의 범위를 약간 벗어납니다. 업로드 버킷이 자체 도메인 접근을 허용하지 않는 경우, 이로 인해 다른 문제가 발생할 수 있으므로 반드시 수정해야 합니다.

@rishabh

저도 같은 문제를 겪고 있습니다.

여기서 정확히 무슨 일이 있었는지 조금 불분명합니다. 제가 시도할 때마다 두 경우 모두 정상적으로 작동하는 것 같습니다. 일시적인 네트워크 문제로 간주할 수 있지만, 다시 발생하면 알려 주세요

이 구성 요소에 로딩 인식을 개선하기 위한 작은 업데이트를 배포했습니다. 이제 기본 브라우저 Iframe 스타일 대신 테마 색상에 기반한 플레이스홀더가 표시됩니다. 파일이 로딩되는 동안에만 표시되므로 99%의 경우 거의 눈치채지 못할 것입니다.

대부분의 PDF가 즉시 로딩되므로 스피너를 추가하는 것은 가치가 없다고 판단했습니다.

[pacharanero (Marcus Baw)]

업로드 링크 앞에 공백을 추가하여 PDF 미리보기를 억제할 수 있도록 할 수 있을까요? 원박스(oneboxing) 기능처럼요. 문서 목록을 원하는 경우도 있고, 미리보기를 원하는 경우도 있습니다.

[paulrudy]

macOS Catalina에서 Safari를 사용 중인데, 브라우저 내 PDF 표시를 차단하는 설정은 전혀 없습니다. 예를 들어 http://www.orimi.com/pdf-test.pdf 는 정상적으로 표시됩니다. 그런데도 theme-creator에서 미리보기를 볼 때 “플러그인 차단” 창/메시지가 계속 나타납니다.

Safari 설정의 사이트별 설정도 다른 웹사이트와 다를 바 없습니다.

다른 사용자분들도 같은 현상이 발생하나요?

[paulrudy]

macOS Big Sur의 Safari에서는 여전히 작동하지 않습니다. 블로그 플러그인에 대한 특별한 설정은 없으며, 다른 PDF 파일은 브라우저에서 정상적으로 표시됩니다.

테마 크리에이터에서 미리보기 페이지를 로드할 때 Safari Web Inspector에 다음과 같은 오류가 표시됩니다:
Unrecognized Content-Security-Policy directive 'worker-src'.
Refused to load blob:https://theme-creator.discourse.org/7b9b62c7-e782-4080-a521-04e3b06aa142 because it does not appear in the object-src directive of the Content Security Policy.

[nathank (Nathan Kershaw)]

@pacharanero

업로드 링크 앞에 공백을 붙여 원박싱(oneboxing)처럼 PDF 미리보기를 억제할 수 있도록 할 수 있을까요?

이것은 해당 컴포넌트에 큰 개선이 될 것입니다! @Johani, 가능한가요?

[Freez (Damien Lecan)]

@paulrudy

테마 크리에이터에서 미리보기 페이지를 로드할 때 Safari 웹 인스펙터에서 다음과 같은 오류가 발생합니다:
Unrecognized Content-Security-Policy directive 'worker-src'.
Refused to load blob:https://theme-creator.discourse.org/7b9b62c7-e782-4080-a521-04e3b06aa142 because it does not appear in the object-src directive of the Content Security Policy.

저도 Firefox에서 동일한 문제가 발생하는데, 두 번째 방문부터만 나타납니다
이 문제에 대한 우회 방법이 있을까요? CSP 설정에서 수동으로 선언하는 것인가요?

감사합니다

[nathank (Nathan Kershaw)]

이 기능이 내 사이트에서 작동하지 않게 되었습니다. PDF 미리보기 대신 큰 검은색 박스가 표시됩니다:

안전 모드로 플러그인을 비활성화해도 차이가 없으며, 다른 모든 테마 구성 요소를 제거해도 마찬가지입니다.

이미지와 파일 업로드를 S3로 옮긴 후 이런 문제가 발생했는데, 이것이 원인이 아닐까 싶습니다. 하지만 쉽게 되돌릴 수 없어서 그렇지 않기를 바랍니다!

막막합니다. 좋은 구성 요소인데 안타깝네요. 어떤 조언이 있을까요?

[keven]

s3 업로드에서도 동일한 동작을 확인하고 있습니다.

[Benjamin_D (Benjamin Decotte)]

여전히 PDF를 다운로드할 수 있나요?
제 환경에서는 여전히 잘 작동합니다 (s3 + secure media, CDN 없음)

[nathank (Nathan Kershaw)]

@Benjamin_D

여전히 PDF를 다운로드할 수 있나요?

네, 가능합니다. 당신과 동일한 구성을 사용하고 있습니다(그렇게 생각합니다).

[Benjamin_D (Benjamin Decotte)]

• 메시지 내 링크는 domain/secure-media-uploads/meta/original/... 형식입니다.
• 하지만 콘솔/네트워크에서 실제 다운로드가 버킷에서 이루어지는 것을 확인할 수 있습니다.

amz 자격 증명을 확인하시나요?

확인되지 않는다면 이 정보가 도움이 될 수 있습니다.

@martin

모든 업로드를 소급 적용하여 분석하고 필요한 경우 보안으로 표시하려면 uploads:secure_upload_analyse_and_update rake 작업을 실행하세요.

또한 카테고리를 이동할 때(혹은 복사/붙여넣기였나요?) 뭔가 이상한 일이 발생했던 기억이 납니다. 파일을 다시 업로드했을 때 마침내 작동했습니다.

[reclaimedpress]

새로 설치한 Discourse와 새로운 PDF 첨부파일에서도 동일한 현상을 경험하고 있습니다.

[nathank (Nathan Kershaw)]

@Benjamin_D

아니면 이걸로 도움이 될까요?

@Benjamin_D 감사합니다. 결국 보안 업로드가 활성화되어 있지 않았고, 제 링크들은 모두 잘 표시되고 정상적으로 작동합니다. 예를 들어 이 링크처럼요:

The HiNZ eHealth Forum - trusted online digital health discussion

그래서 저는 정말 막막합니다. 제가 운영하는 두 포럼에서는 작동하는데 다른 포럼에서는 작동하지 않는 이유가 무엇인지, 특히 S3가 유일한 차이점인데도 S3로 작동하는 것을 보고 더 혼란스럽습니다.

[hollosch]

discourse의 최신 버전으로 업데이트한 후, PDF 첨부 파일이 더 이상 표시되지 않습니다. 문제가 무엇일 수 있을까요?

[omarfilip]

다른 컴포넌트나 테마와의 충돌일 수 있습니다. 제 환경에서는 정상적으로 작동합니다. 다른 컴포넌트를 비활성화하고, 현재 테마가 기본 테마가 아니라면 기본 테마를 사용해 보세요. 플러그인도 마찬가지입니다.

[nathank (Nathan Kershaw)]

@nathank

그래서 난감합니다 - 특히 제가 운영하는 두 포럼에서는 작동하는데 다른 곳에서는 작동하지 않는 이유에 대해 그렇습니다. 유일한 차이는 S3입니다. 그리고 S3에서 작동하게 만들었다는 점도요. 정말 혼란스럽습니다.

좋습니다 - 진전이 있었습니다. S3 업로드를 비활성화하면 새 업로드에 대해서는 문제가 해결됩니다. 하지만 그 길을 선택하면 S3/로컬이 엉망이 되어버리네요!

CDN(CloudFront)을 사용하지 않아 관리자 페이지에서 귀찮은 오류가 발생하는 것일 수도 있습니다. 설정을 해보고 작동하는지 확인해 보겠습니다.

나중에 - 아니요, CDN은 차이를 만들지 않습니다.

훨씬 나중에 - S3 업로드를 성공적으로 제거했습니다(S3 업로드를 사용하는 것을 중지하는 방법) (조금 땀을 흘렸지만) 이제 모든 것이 정상입니다.

이제 개선하고 싶습니다! 이 문제를 해결해 볼 의사가 있는 기술이 뛰어난 분이 계신가요?

@pacharanero

원박스(oneboxing)처럼 업로드 링크 앞에 공백을 추가하여 PDF 미리보기를 억제할 수 있도록 할 수 있을까요? 때로는 문서 목록이 필요할 때도 있고, 때로는 미리보기가 필요할 때도 있습니다.

[thoka (Thomas Kalka)]

새 탭에서 PDF를 열 수 있도록 해주는 플러그인을 찾고 있습니다.
현재 제 디스코urs는 다운로드만 허용하도록 설정되어 있습니다.
유사한 테마로 이것이 가능한가요?