티스토리에서 pdf 파일의 내용을 보여주는 방법에 대해 알아보았습니다.

 

티스토리

 

 

티스토리에서 pdf 파일의 내용을 보여주는 방법에 대해 알아보았습니다.

 

티스토리에서 PDF 파일 내용을 보여주기 위해서는 HTML 코드를 사용하여 PDF 파일을 임베드(embed)하는 방법이 효과적입니다. 아래에 주요 방법을 정리했습니다.

 

PDF 파일을 티스토리에서 보여주는 방법

1. 구글 드라이브를 활용한 방법

 

구글 드라이브에 PDF 파일을 업로드한 후, 해당 파일을 공유 설정으로 공개하여 HTML 코드에 삽입합니다.

1. PDF 파일 업로드
   • 구글 드라이브에 PDF 파일을 업로드합니다. 
2. 공유 설정 변경
   • 파일의 공유 설정을 "링크가 있는 모든 사용자에게 공개"로 변경합니다. 
3. HTML 코드 작성
   • 아래와 같은 코드를 사용하여 티스토리 글 작성 시 HTML 모드에서 삽입합니다.
   • 파일ID는 구글 드라이브 링크에서 추출한 고유 ID로 대체합니다.

<p><iframe src="https://drive.google.com/file/d/파일ID/preview" width="750" height="530"></iframe></p>
<p><a href="https://drive.google.com/open?id=파일ID" target="_blank" rel="noopener">새 창에서 열기</a></p>

 

결과 확인

• 티스토리 기본 모드로 돌아가 PDF 미리보기가 제대로 표시되는지 확인합니다.

2. HTML 태그를 이용한 직접 삽입

PDF 파일을 웹 서버에 업로드하거나 티스토리에 첨부 후, HTML 태그를 이용해 직접 삽입합니다.

 

1. PDF 파일 링크 확보
   • PDF 파일을 티스토리에 첨부하거나 웹 서버에 업로드한 후, 링크 주소를 확보합니다.
2. HTML 코드 작성
   • 아래 코드를 사용하여 PDF 뷰어를 삽입합니다.
   • PDF파일링크를 실제 PDF 파일의 URL로 대체합니다.

<style>
  @media (max-width: 768px) {
    #pdf-viewer { display: none; }
    .mobile-link { display: block; }
  }
</style>
<div id="pdf-viewer">
  <object type="application/pdf" data="PDF파일링크" width="800" height="600">
    <param name="src" value="PDF파일링크">
  </object>
</div>
<div class="mobile-link" style="display: none;">
  <p>모바일에서는 <a href="your-pdf-url.pdf">PDF 다운로드</a>를 이용하세요.</p>
</div>

 

3. PDF.js 라이브러리를 활용한 방법

PDF.js는 PDF 파일을 웹 페이지에서 렌더링할 수 있는 강력한 라이브러리입니다.

1. PDF.js 스크립트 추가
   • 아래와 같은 HTML 코드를 사용하여 PDF.js를 적용합니다.
   • YOUR_PDF_URL를 PDF 파일의 URL로 변경합니다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.3.122/pdf.min.js"></script>
<script>
  const url = 'https://blog.kakaocdn.net/dn/VCJ4z/btsM3XazrwI/nglYoknbTp2eQzK39nkoT0/tfile.pdf#navpanes=0&zoom=100';
  const pdfjsLib = window['pdfjs-dist/build/pdf'];
  pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.3.122/pdf.worker.min.js';
  const loadingTask = pdfjsLib.getDocument(url);
  const scale = window.innerWidth < 768 ? 0.8 : 1.5;
  
  loadingTask.promise.then(pdf => {
    const viewer = document.getElementById('pdf-viewer');
    for (let pageNum = 1; pageNum <= pdf.numPages; pageNum++) {
      pdf.getPage(pageNum).then(page => {
        const viewport = page.getViewport({ scale });
        const canvas = document.createElement('canvas');
        const context = canvas.getContext('2d');
        canvas.height = viewport.height;
        canvas.width = viewport.width;
        viewer.appendChild(canvas);
        page.render({ canvasContext: context, viewport }).promise;
      });
    }
  });
</script>

<div id="pdf-viewer"></div>

 

주의사항

• 구글 드라이브를 사용하는 경우, 공유 설정이 변경되면 티스토리 본문에서도 즉시 반영됩니다.
• PDF.js는 구현 과정이 복잡할 수 있으므로 간단히 구글 드라이브나 HTML 태그 방식을 추천합니다.

위 방법들을 활용하면 티스토리 블로그에서 PDF 내용을 효과적으로 표시할 수 있습니다.

 

 

---

 

2번 방식을 사용했을 때, 왼쪽에 페이지 미리보기(썸네일)가 보이는데, 이것을 안보이게 설정할 수 있나요?

 

PDF를 HTML <object> 태그로 삽입했을 때, 왼쪽에 표시되는 페이지 미리보기(썸네일)를 비활성화하려면 PDF URL에 특정 매개변수를 추가하면 됩니다. 이를 통해 PDF 뷰어의 기본 설정을 변경할 수 있습니다.

썸네일 비활성화 방법

PDF URL에 #navpanes=0를 추가하면 왼쪽의 내비게이션 패널(썸네일)이 비활성화됩니다.

HTML 코드 예시

<object data="PDF파일링크#navpanes=0" type="application/pdf" width="800" height="600">
  <p>PDF를 보려면 <a href="PDF파일링크">여기</a>를 클릭하세요.</p>
</object>

 

설명

• #navpanes=0: PDF 뷰어의 내비게이션 패널(썸네일)을 숨깁니다.
• PDF파일링크를 실제 PDF 파일의 URL로 대체하세요.

추가 설정

다른 매개변수를 함께 사용할 수도 있습니다:

• #toolbar=0: 상단 도구 모음을 숨깁니다.
• #zoom=100: 초기 확대/축소 비율을 설정합니다.

 

예를 들어, 모든 설정을 조합한 URL은 다음과 같습니다.

<object data="PDF파일링크#navpanes=0&toolbar=0&zoom=100" type="application/pdf" width="800" height="600">
  <p>PDF를 보려면 <a href="PDF파일링크">여기</a>를 클릭하세요.</p>
</object>

 

이 방법을 사용하면 티스토리에서 PDF 삽입 시 썸네일을 숨길 수 있습니다.

 

 

https://www.tistory.com

티스토리