인라인 PDF 미리보기

안녕하세요,

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

2.8.0.beta6

예시

1개의 좋아요

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

5개의 좋아요

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

4개의 좋아요

다들 감사합니다.

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



4개의 좋아요

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

1개의 좋아요

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

3개의 좋아요

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

3개의 좋아요

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

2개의 좋아요

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

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

3개의 좋아요

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

2개의 좋아요

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

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

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

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

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

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

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

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

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

두 가지 옵션이 있습니다.

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

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

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

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

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

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

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

10개의 좋아요

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

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

콘솔:

3개의 좋아요

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

4개의 좋아요

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

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

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

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

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

3개의 좋아요

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

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

3개의 좋아요

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

UX: adds missing iFrame attributes - Pull Request #4 - discourse/discourse-pdf-previews - GitHub

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

3개의 좋아요

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

3개의 좋아요

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

3개의 좋아요

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

3개의 좋아요

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

FIX: previews are still broken on MacOS safari - Pull Request #5 - discourse/discourse-pdf-previews - GitHub

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

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

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

Security Verification

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

7개의 좋아요