🔧 PDF 404 오류 해결 및 로딩 상태 개선
🛠️ PDF 404 오류 해결: - PDF 파일 존재 여부를 HEAD 요청으로 먼저 확인 - 파일이 존재할 때만 iframe src 설정 - 토큰을 URL 파라미터로 전달 (_token) - 백엔드 PDF API에서 _token 파라미터 지원 📱 PDF 미리보기 로딩 개선: - pdfLoading, pdfLoaded, pdfSrc 상태 추가 - 로딩 중 스피너 표시 - iframe 로드 완료/에러 이벤트 처리 - handlePdfError() 함수로 에러 처리 개선 🎯 사용자 경험 개선: - PDF 로딩 상태 명확한 표시 - 에러 발생 시 적절한 메시지 - 불필요한 404 요청 방지 - 리소스 정리 개선 🔍 디버깅 개선: - PDF 로드 과정 상세 로깅 - 에러 원인 명확한 표시 - 파일 존재 여부 사전 확인
This commit is contained in:
@@ -483,12 +483,21 @@
|
||||
<!-- PDF 뷰어 컨테이너 -->
|
||||
<div class="border rounded-lg overflow-hidden bg-gray-100 relative" style="height: 500px;">
|
||||
<!-- PDF iframe 뷰어 -->
|
||||
<iframe :src="`/api/documents/${previewResult?.document_id}/pdf`"
|
||||
<iframe x-show="!pdfError && !pdfLoading"
|
||||
class="w-full h-full border-0"
|
||||
x-show="!pdfError"
|
||||
@error="pdfError = true">
|
||||
:src="pdfSrc"
|
||||
@load="pdfLoaded = true"
|
||||
@error="handlePdfError()">
|
||||
</iframe>
|
||||
|
||||
<!-- PDF 로딩 상태 -->
|
||||
<div x-show="pdfLoading" class="flex items-center justify-center h-full">
|
||||
<div class="text-center">
|
||||
<i class="fas fa-spinner fa-spin text-2xl text-gray-500 mb-2"></i>
|
||||
<p class="text-gray-600">PDF를 로드하는 중...</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div x-show="pdfError" class="flex items-center justify-center h-full text-gray-500">
|
||||
<div class="text-center">
|
||||
<i class="fas fa-exclamation-triangle text-2xl mb-2"></i>
|
||||
|
||||
Reference in New Issue
Block a user