# 인라인 PDF 미리보기

**URL:** https://meta.discourse.org/t/inline-pdf-previews/157649
**Category:** Theme component
**Tags:** official, desktop, pdf-previews
**Created:** [7월 13, 2020, 9:18오후 UTC](https://meta.discourse.org/t/inline-pdf-previews/157649 "2020-07-13T21:18:10Z")
**Posts on this page:** 20
**Page:** 2

<div class="post-metadata">

### Author: ![ufukayyildiz](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ufukayyildiz/32/217157_2.png) [@ufukayyildiz](https://meta.discourse.org/u/ufukayyildiz)
#### Post date: [10월 18, 2021, 3:11오후 UTC](https://meta.discourse.org/t/inline-pdf-previews/157649/35 "2021-10-18T15:11:40Z")

</div>

안녕하세요,

이 컴포넌트를 어느 정도 사용해 왔는데, 오늘 임베드된 미리보기가 더 이상 페이지에 표시되지 않는다는 사실을 알게 되었습니다.

### 2.8.0.beta6

[예시](https://fstdesk.com/t/bad-bug-book-handbook-of-foodborne-pathogenic-microorganisms-and-natural-toxins/1567)

---

<div class="post-metadata">

### Author: ![omarfilip](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/omarfilip/32/208019_2.png) [@omarfilip](https://meta.discourse.org/u/omarfilip)
#### Post date: [10월 18, 2021, 6:21오후 UTC](https://meta.discourse.org/t/inline-pdf-previews/157649/36 "2021-10-18T18:21:24Z")

</div>

모든 데스크톱 브라우저에서 정상적으로 보입니다:

 ![Screen Shot 2021-10-18 at 11.20.03 AM](https://global.discourse-cdn.com/meta/original/3X/7/b/7b69acc2dac71a863e5ef325b6e596812499f7c1.jpeg)

---

<div class="post-metadata">

### Author: ![Jagster](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jagster/32/192154_2.png) [@Jagster](https://meta.discourse.org/u/Jagster)
#### Post date: [10월 18, 2021, 6:55오후 UTC](https://meta.discourse.org/t/inline-pdf-previews/157649/37 "2021-10-18T18:55:34Z")

</div>

아이패드 Safari에서는 다음과 같이 보입니다:

 ![kuva](https://global.discourse-cdn.com/meta/original/3X/2/e/2e301738569d6deab72cce2aba5a562181017eb1.png)

---

<div class="post-metadata">

### Author: ![ufukayyildiz](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ufukayyildiz/32/217157_2.png) [@ufukayyildiz](https://meta.discourse.org/u/ufukayyildiz)
#### Post date: [10월 18, 2021, 8:49오후 UTC](https://meta.discourse.org/t/inline-pdf-previews/157649/38 "2021-10-18T20:49:04Z")

</div>

다들 감사합니다.

방금 다시 확인해 보니, Mac에서 Safari는 정상이고 Edge도 정상이지만 Chrome만 실패했습니다. 흥미롭네요.

 ![Screen Shot 2021-10-18 at 23.46.22](https://global.discourse-cdn.com/meta/original/3X/c/6/c6375073d33a36f548178fe05e88580952319bb3.png)  
 ![Screen Shot 2021-10-18 at 23.46.59](https://global.discourse-cdn.com/meta/original/3X/8/e/8e9dc5775a2f01ce38ae7bcfb836549c4450a48d.png)  
 ![Screen Shot 2021-10-18 at 23.47.40](https://global.discourse-cdn.com/meta/original/3X/8/a/8a3be9f9de39f99828d5cd59ef569e330cb076da.png)

---

<div class="post-metadata">

### Author: ![BCHK](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/bchk/32/3268_2.png) [@BCHK](https://meta.discourse.org/u/BCHK)
#### Post date: [10월 18, 2021, 9:03오후 UTC](https://meta.discourse.org/t/inline-pdf-previews/157649/39 "2021-10-18T21:03:44Z")

</div>

Mac에서 Safari가 이 플러그인 사용을 허용하도록 설정하는 방법이 있을까요? 다른 브라우저에서는 정상적으로 작동하는데, Safari에서는 차단됩니다. 설정/웹사이트 섹션에서 콘텐츠 차단기를 꺼도 마찬가지입니다. 차단기를 끄기 위해 다른 설정 영역을 확인해야 하는 부분이 있을까요? 도움이 되시면 알려주세요.

---

<div class="post-metadata">

### Author: ![Jagster](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jagster/32/192154_2.png) [@Jagster](https://meta.discourse.org/u/Jagster)
#### Post date: [10월 18, 2021, 9:18오후 UTC](https://meta.discourse.org/t/inline-pdf-previews/157649/40 "2021-10-18T21:18:29Z")

</div>

정말 모르겠지만, 이건 그냥 대역폭 낭비일 수도 있습니다. 사파리는 비교적 엄격한 CSP 규칙과 기타 보안 문제로 인해 이전에도 문제를 일으킨 적이 있었거든요. 하지만 그렇다면 맥 버전뿐 아니라 모든 사파리 버전에서 문제가 생겼어야 할 텐데, 제 생각엔 그렇지 않은 것 같습니다.

---

<div class="post-metadata">

### Author: ![omarfilip](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/omarfilip/32/208019_2.png) [@omarfilip](https://meta.discourse.org/u/omarfilip)
#### Post date: [10월 18, 2021, 9:58오후 UTC](https://meta.discourse.org/t/inline-pdf-previews/157649/41 "2021-10-18T21:58:48Z")

</div>

> [@BCHK](#):
>
> Mac에서 Safari가 이 플러그인을 사용할 수 있도록 허용하려면 어떻게 해야 하나요?

저는 Mac Safari에서 잘 작동합니다. 제가 작동하지 않는 곳은 iPhone(Safari, FF, Chrome)뿐입니다. 최근 iPad에서는 테스트해 보지 않았습니다.

---

<div class="post-metadata">

### Author: ![anon73664359](https://avatars.discourse-cdn.com/v4/letter/a/6de8d8/32.png) [@anon73664359](https://meta.discourse.org/u/anon73664359)
#### Post date: [10월 18, 2021, 10:24오후 UTC](https://meta.discourse.org/t/inline-pdf-previews/157649/42 "2021-10-18T22:24:25Z")

</div>

Apple의 제한 사항으로 인해 iOS/iPadOS의 모든 웹 브라우저가 동일한 렌더링 엔진(WebKit)을 사용하므로, 그 부분은 사실 크게 문제가 되지 않습니다.

---

<div class="post-metadata">

### Author: ![BCHK](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/bchk/32/3268_2.png) [@BCHK](https://meta.discourse.org/u/BCHK)
#### Post date: [10월 18, 2021, 11:06오후 UTC](https://meta.discourse.org/t/inline-pdf-previews/157649/43 "2021-10-18T23:06:25Z")

</div>

새로운 MacBook Air, Safari v. 14.1.1에서 보이는 모습입니다.

어딘가에 설정이 잘못되어 있는 것 같습니다…

 ![image](https://global.discourse-cdn.com/meta/original/3X/1/e/1e116290c7a0bb94dd8de34d8f1e09ebe2039691.jpeg)

---

<div class="post-metadata">

### Author: ![anon73664359](https://avatars.discourse-cdn.com/v4/letter/a/6de8d8/32.png) [@anon73664359](https://meta.discourse.org/u/anon73664359)
#### Post date: [10월 18, 2021, 11:06오후 UTC](https://meta.discourse.org/t/inline-pdf-previews/157649/44 "2021-10-18T23:06:51Z")

</div>

Safari를 최신 버전으로 업데이트해 보세요.

---

<div class="post-metadata">

### Author: ![Johani](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/johani/32/176920_2.png) [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [10월 19, 2021, 1:52오후 UTC](https://meta.discourse.org/t/inline-pdf-previews/157649/45 "2021-10-19T13:52:59Z")

</div>

새로운 업데이트를 적용했습니다.

> <https://github.com/discourse/discourse-pdf-previews/commit/dd96fee0e01423d568449402cee85e690a61ea27>

> [@pacharanero](#):
>
> 업로드 링크 앞에 공백을 추가하여 PDF 미리보기를 비활성화할 수 있도록 하는 것이 가능할까요?

> [@nathank](#):
>
> 이것은 해당 컴포넌트에 상당한 개선이 될 것입니다! @Johani 님, 이게 가능한가요?

이제 특정 PDF 파일에 대해 미리보기를 비활성화할 수 있습니다. 원박스(oneboxes)처럼 정확히 작동하는 것은 아니지만(테마 컴포넌트에서 구현하기가 다소 복잡하기 때문), 매우 유사하게 동작합니다.

PDF를 업로드하면 기본적으로 컴포저에서 다음과 같은 내용을 볼 수 있습니다.

```plaintext
[file.pdf|attachment](upload://2cLML0SIwebGHDjlKRVzZ3VRv0f.pdf) (524.1 KB)

```

아래와 같이 파일 이름 앞에 공백을 추가하기만 하면 됩니다.

```plaintext
[file.pdf|attachment](upload://2cLML0SIwebGHDjlKRVzZ3VRv0f.pdf) (524.1 KB)

```

공백은 괄호 **안쪽** 에 있어야 한다는 점에 유의하세요. 파일을 다운로드할 때 파일 이름에 영향을 주지 않으며, 게시물에 렌더링되는 파일 설명에도 영향을 주지 않습니다.

이렇게 하면 렌더링된 게시물(cooked post)에서 해당 PDF에 미리보기가 첨부되지 않습니다.

> [@thoka](#):
>
> PDF를 새 탭에서 열 수 있도록 허용하는 플러그인을 찾고 있습니다.  
> 현재 제 디스코urses의 동작 방식은 다운로드만 허용합니다.

이번 업데이트에는 새로운 설정이 추가되었습니다.

 ![image](https://global.discourse-cdn.com/meta/original/3X/c/6/c6193b5904389323e983b5b9f6285cd313f07ae7.png)

두 가지 옵션이 있습니다.

`Inline`(인라인)과 `New Tab`(새 탭)

`Inline`을 선택하면 PDF 미리보기가 이전과 같이 게시물 내에서 렌더링됩니다.

`New Tab`을 선택하면 컴포넌트가 인라인 미리보기를 생성하지 않습니다. 대신 첨부 파일 링크를 클릭하면 새 탭이 열립니다. 새 탭에서는 PDF 파일이 브라우저의 기본 리더로 표시됩니다.

 ![image](https://global.discourse-cdn.com/meta/original/3X/1/b/1b9c49d15fc012e33096c2af3caa60a29e8a1d92.jpeg)

그리고 첨부 파일 링크 옆의 아이콘이 `download`(다운로드) 대신 `external-link`(외부 링크)로 변경됩니다.

해당 설정의 기본값은 `Inline`입니다. 따라서 업데이트 전에 이 컴포넌트를 설치했던 사이트에는 영향을 미치지 않습니다. 단순히 토글해야 하는 새로운 옵션이 추가된 것입니다.

Safari 및 일부 iOS 기기에서 작동하지 않는다는 보고가 몇 건 있었습니다. 저에게는 재현이 되지 않았습니다. 이번 업데이트는 Apple 기기에서 매우 까다로운 것으로 알려진 blob 대신 base64 URL로 PDF를 로드함으로써 이 문제를 해결하려고 시도합니다.

컴포넌트를 업데이트해 주시고, 브라우저도 최신 버전인지 확인해 주세요. 만약 Apple 기기에서 어떤 이유로 작동하지 않는다면, 가능하면 브라우저 콘솔을 확인하고 무엇을 보고 있는지 알려주세요.

---

<div class="post-metadata">

### Author: ![omarfilip](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/omarfilip/32/208019_2.png) [@omarfilip](https://meta.discourse.org/u/omarfilip)
#### Post date: [10월 19, 2021, 9:14오후 UTC](https://meta.discourse.org/t/inline-pdf-previews/157649/46 "2021-10-19T21:14:08Z")

</div>

최신 버전인 2.8.0.beta6 (a1daf9fe53)로 업데이트한 이후, PDF 미리보기가 약간 더 느리게 로드되는 것처럼 보입니다. 그리고 Chrome 브라우저에서는 게시글에 있는 세 개의 PDF 중 하나가 표시되지 않는 경우가 적어도 한 번 있었습니다:

 ![pdf-previews](https://global.discourse-cdn.com/meta/original/3X/0/c/0c9670610cfdd26e0db7d3a76f41e164ecf66e2e.jpeg)

캐싱 문제ではありません - Chrome의 캐시를 지우고, PDF에 약간의 변경을 가한 후 다시 업로드해도 미리보기가 여전히 표시되지 않습니다. 오류 로그에는 항목이 없습니다. Chrome은 최신 버전으로 업데이트되어 있습니다.

콘솔:

 ![inline pdfs Chrome console](https://global.discourse-cdn.com/meta/original/3X/e/8/e861c1a7df04c24f2b3d528ce0c4479b6496051e.png)

---

<div class="post-metadata">

### Author: ![Wall-E](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/wall-e/32/184438_2.png) [@Wall-E](https://meta.discourse.org/u/Wall-E)
#### Post date: [10월 19, 2021, 9:15오후 UTC](https://meta.discourse.org/t/inline-pdf-previews/157649/47 "2021-10-19T21:15:58Z")

</div>

2.8.0.beta6 버전을 사용 중입니다. PC - Windows 10 환경입니다. 비슷한 현상을 관찰했습니다. Firefox는 약간 느리지만 결국 미리보기가 로드됩니다. Chrome은 미리보기를 표시하지 않으며, 이 회색 플레이스홀더에서 멈추는 것처럼 보입니다.

 ![2021-10-19 17_13_01-Testing new feature_ PDF preview - Staff - Helionauts](https://global.discourse-cdn.com/meta/original/3X/4/3/43f6e558d944db5347160d16ed05e7e10f695885.png)

---

<div class="post-metadata">

### Author: ![Johani](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/johani/32/176920_2.png) [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [10월 20, 2021, 2:57오후 UTC](https://meta.discourse.org/t/inline-pdf-previews/157649/48 "2021-10-20T14:57:08Z")

</div>

> [@omarfilip](#):
>
> 게시글의 PDF 3개 중 1개가 Chrome에서 표시되지 않습니다

> [@Wall-E](#):
>
> 비슷한 현상을 확인했습니다

자세한 정보를 공유해 주셔서 감사합니다. 3개 중 2개가 정상적으로 로드되었기 때문에, 이는 아마도 파일 크기와 관련이 있을 것이라 추측했습니다… 그리고 실제로 그런 것으로 확인되었습니다.

큰 크기의 PDF를 업로드하면 Firefox에서는 정상적으로 작동하지만 Chrome에서는 오류가 발생합니다. 이 문제에 대해 조금 조사해 보니, base64 URL의 길이 제한은 주로 브라우저 벤더에 의해 결정되는 것 같습니다. Firefox에는 제한이 없지만, Chrome은 이를 2MB로 제한하고 있습니다.

따라서 base64 URL은 실행 가능한 옵션이 아니며, blob URL로 돌아가야 합니다. 미리보기 요소가 iFrame 대신 `<object>` 태그인 경우 Safari에서 더 나은 지원을 제공하는 것 같습니다.

따라서 이 PR에서는 모든 것을 blob URL로 되돌리고 태그를 `<object>`로 변경합니다. 이는 Chrome에서 큰 파일에 대한 문제를 확실히 해결할 것이며, hopefully 🤞 Apple 기기에서의 문제도 수정할 수 있기를 바랍니다.

> <https://github.com/discourse/discourse-pdf-previews/pull/3/files>
>
> Most of the changes in this PR are about moving code around. Here are the big ch…anges.
> 
> \- #2 changed the way this component works to use base64 URLs as the src for the preview iFrame. The issue with this is that browser length limitations for a base64 URL are not standardized. So, this makes it very difficult to assess whether or not the file will be loaded. It would depend on the file size. For example, Chrome caps it at 2mb while Firefox doesn't seem to have any limits. This PR reverts back to using blob object URLs.
> 
> \- Instead of just loading an iFrame, this PR wraps the iFrame in an \`\<object\>\` tag. If the browser supports the object tag, it will load the preview in it. If not, it will load the iFrame. The reason for doing this is mostly about Safari support. 
> 
> \- In #2 the iFrame wasn't appended until the XHR request had been resolved. This means that it caused jitter as the file got loaded. This PR appends it a little bit earlier and changes the src once the request is ready. That prevents the jitter as the file loads.

다시 한 번 컴포넌트를 업데이트해 보시고, 여전히 문제가 있다면 알려 주세요.

---

<div class="post-metadata">

### Author: ![omarfilip](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/omarfilip/32/208019_2.png) [@omarfilip](https://meta.discourse.org/u/omarfilip)
#### Post date: [10월 20, 2021, 4:02오후 UTC](https://meta.discourse.org/t/inline-pdf-previews/157649/49 "2021-10-20T16:02:21Z")

</div>

3개의 PDF가 포함된 게시물의 파일 크기는 위에서부터 각각 548.3 KB, 1.1 MB, 1.6 MB입니다. 해당 컴포넌트만 업데이트한 후 미리보기는 표시되지만, Chrome에서는 더 이상 전체 폭으로 표시되지 않습니다:

 ![pdf previews inline after-update](https://global.discourse-cdn.com/meta/original/3X/c/9/c9d7b36045abdc09e900c5e2bdc72c8b4991f662.jpeg)

수정: FF는 위의 Chrome과 동일하게 표시되며, Safari는 미리보기 대신 회색 박스를 표시합니다:

 ![safari-after-update](https://global.discourse-cdn.com/meta/original/3X/3/5/3555ace1247ddd50df3f95415eb1eb2ade0a97ea.jpeg)

---

<div class="post-metadata">

### Author: ![Johani](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/johani/32/176920_2.png) [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [10월 20, 2021, 4:35오후 UTC](https://meta.discourse.org/t/inline-pdf-previews/157649/50 "2021-10-20T16:35:30Z")

</div>

> [@omarfilip](#):
>
> 위에서 FF가 Chrome과 똑같이 보입니다.

감사합니다. 크기 문제와 관련하여 작은 수정 사항을 적용했습니다.

[UX: adds missing iFrame attributes - Pull Request #4 - discourse/discourse-pdf-previews - GitHub](https://github.com/discourse/discourse-pdf-previews/pull/4/files)

Safari에서는 문제가 해결되지 않을 가능성이 높지만, 시도해 보시고 알려 주십시오.

---

<div class="post-metadata">

### Author: ![omarfilip](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/omarfilip/32/208019_2.png) [@omarfilip](https://meta.discourse.org/u/omarfilip)
#### Post date: [10월 20, 2021, 4:37오후 UTC](https://meta.discourse.org/t/inline-pdf-previews/157649/51 "2021-10-20T16:37:43Z")

</div>

네 - Chrome과 FF는 수정되었지만, Safari는 여전히 회색 상자만 표시됩니다.

---

<div class="post-metadata">

### Author: ![Johani](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/johani/32/176920_2.png) [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [10월 20, 2021, 4:39오후 UTC](https://meta.discourse.org/t/inline-pdf-previews/157649/52 "2021-10-20T16:39:28Z")

</div>

확인차 묻는데, 이전에 Safari가 잘 작동했었죠?

---

<div class="post-metadata">

### Author: ![omarfilip](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/omarfilip/32/208019_2.png) [@omarfilip](https://meta.discourse.org/u/omarfilip)
#### Post date: [10월 20, 2021, 4:41오후 UTC](https://meta.discourse.org/t/inline-pdf-previews/157649/53 "2021-10-20T16:41:17Z")

</div>

네, 최근 업데이트 전까지는 모든 데스크톱 브라우저가 정상적으로 작동했습니다. Safari가 제 일상용 브라우저가 아니라서 정확히 언제까지 정상 작동했는지는 말씀드리기 어렵지만, 과거에는 정상적으로 작동한 적이 있다는 점은 말씀드릴 수 있습니다.

---

<div class="post-metadata">

### Author: ![Johani](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/johani/32/176920_2.png) [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [10월 20, 2021, 8:04오후 UTC](https://meta.discourse.org/t/inline-pdf-previews/157649/54 "2021-10-20T20:04:55Z")

</div>

이 커밋으로 Safari 문제를 수정할 수 있을 것입니다.

[FIX: previews are still broken on MacOS safari - Pull Request #5 - discourse/discourse-pdf-previews - GitHub](https://github.com/discourse/discourse-pdf-previews/pull/5/files)

MacBook에서 직접 테스트해 보았는데, Safari, Chrome, Firefox 모두에서 정상적으로 작동합니다.

누군가 이 문제를 발견한다면

 ![image](https://global.discourse-cdn.com/meta/original/3X/d/3/d31b4ce8a25af6a0639d6c4f89371599a13f521d.png)

이는 컴포넌트 문제가 아니라 사용자의 환경 설정 문제입니다.

[Security Verification](https://discussions.apple.com/thread/252491843)

또한, 이 컴포넌트는 Discourse에서 정의한 대로 iOS든 Android든 모바일 폰에서 PDF 미리보기를 지원하지 않았다는 점을 유의해 주세요. 따라서 이는 예상되는 동작입니다.

> [@Johani](#):
>
> 이 컴포넌트는 데스크톱에서만 작동합니다. 모바일에서 미리보기를 표시할 경우 모든 요소가 매우 작아져 가독성이 떨어져 이점이 거의 없기 때문입니다.

[이전 페이지](https://meta.discourse.org/t/inline-pdf-previews/157649.md?page=1)

[다음 페이지](https://meta.discourse.org/t/inline-pdf-previews/157649.md?page=3)
