인라인 PDF 미리보기

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

이 테마 컴포넌트 설치

기능

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

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

또한, Discourse에서는 기본적으로 PDF 업로드가 허용되지 않습니다. 사용자가 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개의 좋아요

I’m hosting my uploads and images on S3, and the preview is blocked by a “CORS policy: No ‘Access-Control-Allow-Origin’ header is present”.

Below is what Chrome console says:

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.

Update

I was able to fix this by adding the following CORS policy in my S3 bucket configuration.

<CORSConfiguration>
 <CORSRule>
   <AllowedOrigin>https://mydiscourse.url/</AllowedOrigin>
   <AllowedMethod>GET</AllowedMethod>
   <AllowedHeader>*</AllowedHeader>
   <ExposeHeader>Access-Control-Allow-Origin</ExposeHeader>
 </CORSRule>
</CORSConfiguration>
2개의 좋아요

It’s necessary to add, that if you see this text in the error message from origin 'https://lounge.travelmassive.com' has been where your domain is without slash / at the end, then in the CORS configuration you should also add your domain without slash at the end like this:
https://mydiscourse.url

1개의 좋아요

I noticed that your uploads are on AWS so, the issue is probably CORS related (the component is not active on your site for me to confirm). See the post below yours.

thanks for sharing that!

Please note that this issue will only affect self-hosters that have set up something like S3. Self-hosters that are not using S3 will not run into this issue. Customers hosted by CDCK will also not need to worry about that since they already have that set up.

That said, CORS configuration is a bit outside of the scope of this topic. If your uploads bucket does not allow your own domain access, then that needs to be fixed regardless since there might be some other issues caused by that.

I’m a little bit unsure what happened here. Both cases seem to be working for me everytime I try. We can just chalk it up to a transitory network issue but please let me know if you see it again :+1:

I pushed a tiny update to this component that should improve the loading perception, there’s now a theme-color based placeholder instead of the default browser Iframe styles. It only shows up while the file is loading so 99% of the time, you won’t even notice it.

Given that most PDFs will load instantly I didn’t feel like adding a spinner would be worth it.

9개의 좋아요

Would it be possible to make PDF Preview suppressable by prepending a space before the upload link, like with oneboxing? Sometimes you want a list of documents and not previews. Sometimes you want a preview.

9개의 좋아요

I’m on Safari on MacOS Catalina, and I don’t have anything disabling in-browser PDF display—for instance, http://www.orimi.com/pdf-test.pdf displays fine. But I’m still getting the “Blocked Plug-in” window/message when I view the preview in theme-creator.

Site-specific settings in Safari prefs aren’t any different than other websites.

Is that happening for anyone else?

3개의 좋아요

Still not working for me on Safari in MacOS Big Sur. No special settings to blog plugins, and other PDFs display in the browser.

Safari Web Inspector has the following complaints when loading the preview page in theme-creator:
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.

3개의 좋아요

This would be a vast improvement to this component! Is that doable, @Johani?

5개의 좋아요

Same issue for me on Firefox, but only after the 2nd visit :wink:
Is there a workaround for this? Manual declaration in the CSP config?

Thank you

1개의 좋아요

This has stopped working on my site. I get a big black box instead of the PDF preview:

Disabling plugins via Safe Mode makes no difference, nor does removing every other Theme component.

It has happened after moving image and file uploads to S3, which might be the culprit. I hope not, because they can’t be moved back easily!

I’m stumped. Shame, as it is a great component. Any suggestions?

2개의 좋아요

I am seeing the same behaviour with s3 uploads on.

3개의 좋아요

Are you still able to download the pdf ?
Still working for me (s3 + secure media and no cdn) :thinking:

1개의 좋아요

Yes, we are. Have the same setup as you (I think).

1개의 좋아요

:thinking:

  • my links in the messages are in the form of domain/secure-media-uploads/meta/original/...
  • but in the console/network I can see that the actual downloads come from the bucket
    Do you see the amz credential ?

if not maybe this coud help ?

I also remember that something weird was happening when I tried to move a post from categories (or was it a copy/paste?) it finally worked when I re-uploaded the file.

1개의 좋아요

I am experiencing this same behavior on a fresh discourse installation and a fresh PDF attachment.

3개의 좋아요

Thanks @Benjamin_D. Turns out I don’t have secure uploads enabled, and my links all look nice and work fine, such as this one:

The HiNZ eHealth Forum - trusted online digital health discussion

So I’m stumped - especially as to why it works in two forums I run and not the other - S3 being the only difference. And that you have it working with S3. I’m really confused.

1개의 좋아요

After updating to the latest version of discourse, the pdf-attachements are no longer displayed. What could be the problem ?

1개의 좋아요

It may be a conflict with another component or theme. It’s working as expected for me. Start by disabling other components and try using the default theme if yours is different. Same with plugins.

3개의 좋아요

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 skills interested in giving this a crack?

4개의 좋아요

I am searching for a plugin, which allows to open the pdf in a new tab.
Current behavior of my discourse is to allow download only.
Would that be possible with a similar theme ?

5개의 좋아요