vueでpdf適応高さを実装する方法

Vue.js は、現代の Web 開発で最も人気のある JavaScript フレームワークの 1 つになりました。 PDF ファイルをロードする必要がある Vue.js アプリケーションを開発している場合、直面する可能性のある一般的な問題は、PDF コンポーネントの高さが他の HTML 要素のように調整されないことです。

この記事では、pdf.js という JavaScript ライブラリを使用して、高さ調節可能な PDF ビューア コンポーネントを実装する方法を検討します。

pdf.js とは何ですか?

pdf.js は、Mozilla によって開発されたオープン ソース JavaScript ライブラリで、プラグインを使用せずに Web ブラウザーで PDF ファイルを直接レンダリングできます。このライブラリは完全に JavaScript で記述されており、HTML5 Canvas および Web Workers テクノロジに基づいています。

pdf.js には、完全な PDF レンダラー、テキストの選択と検索、サムネイル プレビューなどを含む多くの機能があり、Web ベースのアプリケーションに簡単に埋め込むことができます。

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 コンポーネントでは、最も重要な関数はpdfjsLib.getDocument(src) 関数。指定された URL から PDF ドキュメントをロードし、Document オブジェクトを返します。また、表示するページ番号を格納する pageNum という変数と、PDF ドキュメントの総ページ数を格納する totalPages という変数も定義します。

コンポーネントのマウントされたライフサイクル フックで、loadPDF メソッドを呼び出して PDF ドキュメントをロードし、最初のページのレンダリングを開始します。さらに、canvas 要素を使用して PDF ページをレンダリングします。 PDF ドキュメントがコンテナのサイズに確実に適合するように、Web API の getBoundingClientRect() メソッドを使用して、canvas 要素の高さを動的に計算します。

PDF ページのレンダリング

コンポーネントの renderPage メソッドでは、pdf.js の getPage メソッドを使用して、指定されたページの関連情報を取得します。次に、getViewport メソッドを使用して PDF ページの表示状態を取得し、現在のコンテナの幅を使用してズーム率を計算します。最後に、render メソッドを使用してページを Canvas 要素にレンダリングします。

適応型高さの実装

PDF ビューア コンポーネントの適応型高さを実装するには、PDF ページをレンダリングするときに、ページの高さと一致するように Canvas 要素の高さを動的に設定する必要があります。 。

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

上記の CSS スタイルでは、canvas 要素の高さを auto に設定していることに注意してください。これにより、canvas 要素の高さがその幅に比例するようになります。次に、max-height 属性を使用して、canvas 要素の最大高さをその親要素の高さに制限します。これにより、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ファイルのURLをpropとしてコンポーネントに渡します。

概要

この記事では、pdf.js を使用して Vue.js PDF ビューア コンポーネントを作成し、高さ適応機能を実装する方法を学びました。 pdf.js を使用すると、プラグインや他のサードパーティ ツールを使用せずに、PDF ファイルを Web アプリケーションに簡単に埋め込むことができます。

pdf.js を使用して大きな PDF ファイルをレンダリングする場合、Web アプリケーションのパフォーマンスと読み込み時間に影響を与える可能性があることに注意してください。したがって、この記事で説明する方法を使用する場合は、遅延読み込みなどの手法を使用して PDF ファイルの読み込みおよびレンダリングのプロセスを最適化することを検討する必要があります。

以上がvueでpdf適応高さを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。