[js] blob 데이터를 보여주는 방식 (새창열기, 현재페이지에 보여주기)

1️⃣ window.open(blobUrl, '_blank') 방식

success: (blob) => {
    const blobUrl = URL.createObjectURL(blob);
    window.open(blobUrl, '_blank');
},

 

• 동작
  • 브라우저에서 새 탭을 열고, blob URL을 그대로 그 탭에서 표시
  • 브라우저 기본 PDF 뷰어 사용
• 특징
  • 페이지 내에는 아무것도 표시하지 않고 새 창/탭만 열림
  • UI/레이아웃 제어 불가
  • 브라우저 탭 주소 표시줄에 blob URL 표시 (blob://…)
• 사용 시점
  • 단순히 PDF를 새 창/탭에서 보여주고 싶을 때

---

2️⃣ <iframe> 방식

success: (blob) => {
    const blobUrl = URL.createObjectURL(blob);
    const $iframe = $('<iframe>',{
        src: blobUrl
    });
    $iframe.css({
        width: '100%',
        height: '100%',
    });
    $('#contents-wrapper').append($iframe);
},

 

• 동작
  • 현재 페이지 안에 <iframe>을 생성하고, blob URL을 src로 세팅
  • PDF가 페이지 내부에 바로 표시
• 특징
  • 페이지 내에서 PDF를 레이아웃에 맞게 표시 가능
  • 다른 UI 요소(버튼, 메뉴 등)와 함께 PDF 보기 가능
  • 브라우저 주소창에는 blob URL이 표시되지 않음
• 사용 시점
  • 페이지 안에서 PDF를 미리보기 하고 싶을 때

---

🔑 차이 요약

항목	window.open	iframe
표시 위치	새 탭/새 창	현재 페이지 내부
UI 제어	불가	가능 (크기, 위치, 주변 레이아웃)
주소 표시	blob URL이 탭 주소창에 표시	주소창에 표시되지 않음
사용자 경험	브라우저 기본 PDF 뷰어	페이지 내 내장 뷰어 느낌

---

정리하면:

• 새 탭만 필요 → window.open(blobUrl, '_blank')
• 페이지 안에서 보여주고 싶음 → <iframe>