Vue에서 PDF 적응형 높이를 구현하는 방법

Vue.js는 현대 웹 개발에서 가장 인기 있는 JavaScript 프레임워크 중 하나가 되었습니다. PDF 파일을 로드해야 하는 Vue.js 애플리케이션을 개발하는 경우 직면할 수 있는 일반적인 문제는 PDF 구성 요소의 높이가 다른 HTML 요소처럼 적용되지 않는다는 것입니다.

이 기사에서는 pdf.js라는 JavaScript 라이브러리를 사용하여 적응형 높이 PDF 뷰어 구성 요소를 구현하는 방법을 살펴보겠습니다.

pdf.js가 무엇인가요?

pdf.js는 플러그인을 사용하지 않고 웹 브라우저에서 직접 PDF 파일을 렌더링할 수 있는 Mozilla에서 개발한 오픈 소스 JavaScript 라이브러리입니다. 라이브러리는 전적으로 JavaScript로 작성되었으며 HTML5 Canvas 및 Web Workers 기술을 기반으로 합니다.

pdf.js에는 전체 PDF 렌더러, 텍스트 선택 및 검색, 썸네일 미리보기 등 다양한 기능이 포함되어 있으며 모든 웹 기반 애플리케이션에 쉽게 포함할 수 있습니다.

PDF 적응형 높이 구현

이제 pdf.js 라이브러리를 사용하여 상위 컨테이너의 높이에 적응하는 PDF 뷰어 구성 요소를 구현하는 방법을 자세히 설명하겠습니다.

pdf.js 설치

pdf.js를 사용하려면 먼저 Vue.js 프로젝트에 추가해야 합니다. 다음 명령을 실행하면 npm을 사용하여 pdf.js를 설치할 수 있습니다.

npm install pdfjs-dist

PDF 구성 요소 만들기

Vue.js 프로젝트에서 PDFViewer라는 새 구성 요소를 만듭니다.

<template>
  <div class="pdf-container">
    <canvas ref="canvas" class="pdf-canvas"></canvas>
  </div>
</template>

<script>
import pdfjsLib from 'pdfjs-dist'

export default {
  name: 'PDFViewer',
  props: {
    src: { type: String, required: true }
  },
  data() {
    return {
      pageNum: 1,
      totalPages: null,
      pdfDoc: null,
    }
  },
  mounted() {
    this.loadPDF()
  },
  methods: {
    async loadPDF() {
      try {
        const loadingTask = pdfjsLib.getDocument(this.src)
        const pdf = await loadingTask.promise

        this.pdfDoc = pdf
        this.totalPages = pdf.numPages

        this.renderPage(this.pageNum)
      } catch (error) {
        console.log(error)
      }
    },
    async renderPage(num) {
      const canvas = this.$refs.canvas
      const ctx = canvas.getContext('2d')

      const page = await this.pdfDoc.getPage(num)

      const viewport = page.getViewport({ scale: 1 })
      const clientWidth = this.$el.clientWidth
      const scale = clientWidth / viewport.width

      const viewportScaled = page.getViewport({ scale })
      canvas.height = viewportScaled.height

      await page.render({
        canvasContext: ctx,
        viewport: viewportScaled
      })
    }
  }
}
</script>

이 PDFViewer 구성 요소에서 우리가 사용하는 가장 중요한 기능은 PDF를 로드하는 pdfjsLib.getDocument(src) 함수입니다. 제공된 URL에서 document를 가져와 Document 객체를 반환합니다. 또한 표시하려는 페이지 번호를 저장하기 위해 pageNum이라는 변수를 정의하고 PDF 문서의 총 페이지 수를 저장하기 위해 totalPages라는 변수를 정의합니다.

구성 요소의 마운트된 수명 주기 후크에서 loadPDF 메서드를 호출하여 PDF 문서를 로드하고 첫 페이지 렌더링을 시작합니다. 또한 캔버스 요소를 사용하여 PDF 페이지를 렌더링합니다. PDF 문서가 컨테이너 크기에 맞는지 확인하기 위해 웹 API의 getBoundingClientRect() 메서드를 사용하여 캔버스 요소의 높이를 동적으로 계산합니다.

Render PDF page

컴포넌트의 renderPage 메소드에서는 pdf.js의 getPage 메소드를 사용하여 지정된 페이지의 관련 정보를 얻습니다. 그런 다음 getViewport 메소드를 사용하여 PDF 페이지의 보기 상태를 가져오고 현재 컨테이너의 너비를 사용하여 확대/축소 비율을 계산합니다. 마지막으로 render 메서드를 사용하여 페이지를 캔버스 요소에 렌더링합니다.

적응형 높이 구현

PDF 뷰어 구성 요소의 적응형 높이를 구현하려면 PDF 페이지를 렌더링할 때 페이지 높이와 일치하도록 캔버스 요소의 높이를 동적으로 설정해야 합니다.

.pdf-canvas {
  width: 100%;
  height: auto;
  max-height: 100%;
}

위 CSS 스타일에서는 캔버스 요소의 높이를 자동으로 설정하여 캔버스 요소의 높이가 너비에 비례하도록 했습니다. 그런 다음 max-height 속성을 사용하여 캔버스 요소의 최대 높이를 상위 요소의 높이로 제한합니다. 이렇게 하면 PDF 페이지의 높이가 구성 요소 컨테이너의 높이를 초과하지 않게 됩니다.

PDF 뷰어 구성 요소 사용

이제 PDFViewer라는 PDF 뷰어 구성 요소를 만들고 적응형 높이 기능을 구현했습니다. PDF 파일을 로드해야 하는 Vue.js 애플리케이션의 경우 이제 다음과 같은 방법으로 구성 요소를 사용할 수 있습니다.

<template>
  <div class="pdf-viewer-container">
    <PDFViewer :src="pdfUrl" />
  </div>
</template>

<script>
import PDFViewer from '@/components/PDFViewer.vue'

export default {
  components: { PDFViewer },
  data() {
    return {
      pdfUrl: 'path/to/your/pdf/file.pdf'
    }
  }
}
</script>

위의 코드 예에서는 Vue.js 애플리케이션의 템플릿에 PDFViewer 구성 요소를 추가하고 PDF를 로드합니다. file URL은 소품으로 구성 요소에 전달됩니다.

요약

이 기사에서는 pdf.js를 사용하여 Vue.js PDF 뷰어 구성 요소를 만들고 적응형 높이 기능을 구현하는 방법을 배웠습니다. pdf.js를 사용하면 플러그인이나 기타 타사 도구를 사용하지 않고도 PDF 파일을 웹 애플리케이션에 쉽게 포함할 수 있습니다.

pdf.js를 사용하여 대용량 PDF 파일을 렌더링하는 경우 웹 애플리케이션의 성능과 로드 시간에 영향을 미칠 수 있습니다. 따라서 이 문서에 설명된 방법을 사용할 때는 지연 로딩과 같은 기술을 사용하여 PDF 파일의 로딩 및 렌더링 프로세스를 최적화하는 것을 고려해야 합니다.

위 내용은 Vue에서 PDF 적응형 높이를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!