So implementieren Sie die adaptive PDF-Höhe in Vue

Vue.js hat sich zu einem der beliebtesten JavaScript-Frameworks in der modernen Webentwicklung entwickelt. Wenn Sie eine Vue.js-Anwendung entwickeln, die PDF-Dateien laden muss, besteht ein häufiges Problem darin, dass sich die Höhe der PDF-Komponente nicht wie bei anderen HTML-Elementen anpasst.

In diesem Artikel erfahren Sie, wie Sie mithilfe einer JavaScript-Bibliothek namens pdf.js eine PDF-Viewer-Komponente mit adaptiver Höhe implementieren.

Was ist pdf.js?

pdf.js ist eine von Mozilla entwickelte Open-Source-JavaScript-Bibliothek, die PDF-Dateien ohne Verwendung von Plug-Ins direkt im Webbrowser rendern kann. Die Bibliothek ist vollständig in JavaScript geschrieben und basiert auf der HTML5 Canvas- und Web Workers-Technologie.

pdf.js verfügt über viele Funktionen, darunter einen vollständigen PDF-Renderer, Textauswahl und -suche, Miniaturansichten und mehr, und kann problemlos in jede webbasierte Anwendung eingebettet werden.

Adaptive PDF-Höhe implementieren

Jetzt erklären wir im Detail, wie Sie mit der pdf.js-Bibliothek eine PDF-Viewer-Komponente implementieren, die sich an die Höhe ihres übergeordneten Containers anpasst .

Installieren Sie pdf.js

Um pdf.js zu verwenden, müssen Sie es zunächst zu Ihrem Vue.js-Projekt hinzufügen. Sie können pdf.js mit npm installieren, indem Sie den folgenden Befehl ausführen.

npm install pdfjs-dist

PDF-Komponente erstellen

Erstellen Sie in Ihrem Vue.js-Projekt eine neue Komponente namens 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>

In diesem PDFViewer Innerhalb der Komponente Die wichtigste Funktion, die wir verwenden, ist die Funktion pdfjsLib.getDocument(src), die das PDF-Dokument von der angegebenen URL lädt und ein Document-Objekt zurückgibt. Wir definieren außerdem eine Variable namens pageNum, um die Seitenzahl zu speichern, die wir anzeigen möchten, und eine Variable namens totalPages, um die Gesamtzahl der Seiten im PDF-Dokument zu speichern.

Im gemounteten Lifecycle-Hook der Komponente rufen wir die Methode „loadPDF“ auf, um das PDF-Dokument zu laden und mit dem Rendern der ersten Seite zu beginnen. Darüber hinaus verwenden wir das Canvas-Element zum Rendern von PDF-Seiten. Um sicherzustellen, dass das PDF-Dokument zur Größe des Containers passt, verwenden wir außerdem die Methode getBoundingClientRect() in der Web-API, um die Höhe des Canvas-Elements dynamisch zu berechnen.

PDF-Seite rendern

In der renderPage-Methode der Komponente verwenden wir die getPage-Methode von pdf.js, um relevante Informationen der angegebenen Seite abzurufen. Anschließend verwenden wir die Methode getViewport, um den Ansichtsstatus der PDF-Seite abzurufen, und verwenden die Breite des aktuellen Containers, um den Zoomfaktor zu berechnen. Schließlich verwenden wir die Render-Methode, um die Seite im Canvas-Element zu rendern.

Adaptive Höhe implementieren

Um die adaptive Höhe der PDF-Viewer-Komponente zu implementieren, müssen wir die Höhe des Canvas-Elements beim Rendern der PDF-Seite dynamisch festlegen, damit sie so ist im Einklang mit der Seitenhöhenübereinstimmung.

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

Bitte beachten Sie, dass wir im obigen CSS-Stil die Höhe des Canvas-Elements auf „Auto“ setzen, wodurch sichergestellt wird, dass die Höhe des Canvas-Elements proportional zu seiner Breite ist. Anschließend begrenzen wir die maximale Höhe des Canvas-Elements mithilfe des Attributs „max-height“ auf die Höhe seines übergeordneten Elements. Dadurch wird sichergestellt, dass die Höhe der PDF-Seite die Höhe des Containers der Komponente nicht überschreitet.

Verwenden der PDF-Viewer-Komponente

Jetzt haben wir eine PDF-Viewer-Komponente namens PDFViewer erstellt und die adaptive Höhenfunktion implementiert. Für Vue.js-Anwendungen, die PDF-Dateien laden müssen, können wir die Komponente jetzt wie folgt verwenden: und die URL der PDF-Datei als Requisite an die Komponente übergeben.

Zusammenfassung

In diesem Artikel haben wir gelernt, wie man mit pdf.js eine Vue.js-PDF-Viewer-Komponente erstellt und die adaptive Höhenfunktion implementiert. Durch die Verwendung von pdf.js können wir PDF-Dateien problemlos in Webanwendungen einbetten, ohne Plugins oder andere Tools von Drittanbietern zu verwenden.

Bitte beachten Sie, dass die Verwendung von pdf.js zum Rendern großer PDF-Dateien die Leistung und Ladezeit Ihrer Webanwendung beeinträchtigen kann. Daher sollten Sie bei der Verwendung der in diesem Artikel beschriebenen Methoden den Einsatz von Techniken wie Lazy Loading in Betracht ziehen, um den Lade- und Rendervorgang von PDF-Dateien zu optimieren.

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die adaptive PDF-Höhe in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!