Comment implémenter la hauteur adaptative PDF dans Vue

Vue.js est devenu l'un des frameworks JavaScript les plus populaires dans le développement Web moderne. Si vous développez une application Vue.js qui doit charger des fichiers PDF, un problème courant auquel vous pouvez être confronté est que la hauteur du composant PDF ne s'adapte pas comme les autres éléments HTML.

Dans cet article, nous explorerons comment implémenter un composant de visionneuse PDF à hauteur adaptative en utilisant une bibliothèque JavaScript appelée pdf.js.

Qu'est-ce que pdf.js ?

pdf.js est une bibliothèque JavaScript open source développée par Mozilla qui peut restituer des fichiers PDF directement dans le navigateur Web sans utiliser de plug-ins. La bibliothèque est entièrement écrite en JavaScript et est basée sur la technologie HTML5 Canvas et Web Workers.

pdf.js est doté de nombreuses fonctionnalités, notamment un moteur de rendu PDF complet, une sélection et une recherche de texte, des aperçus miniatures, etc., et peut être facilement intégré à n'importe quelle application Web.

Implémenter la hauteur adaptative PDF

Nous allons maintenant expliquer en détail comment utiliser la bibliothèque pdf.js pour implémenter un composant de visualisation PDF qui s'adapte à la hauteur de son conteneur parent.

Installez pdf.js

Pour utiliser pdf.js, vous devez d'abord l'ajouter à votre projet Vue.js. Vous pouvez installer pdf.js à l'aide de npm en exécutant la commande suivante.

npm install pdfjs-dist

Créer un composant PDF

Dans votre projet Vue.js, créez un nouveau composant appelé 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>

Dans ce composant PDFViewer, la fonction la plus importante que nous utilisons est la fonction pdfjsLib.getDocument(src), qui charge un PDF document à partir de l’URL fournie et renvoie un objet Document. Nous définissons également une variable appelée pageNum pour stocker le numéro de page que nous souhaitons afficher, et une variable appelée totalPages pour stocker le nombre total de pages dans le document PDF.

Dans le hook de cycle de vie monté du composant, nous appelons la méthode loadPDF pour charger le document PDF et commencer à rendre la première page. De plus, nous utilisons l'élément canvas pour restituer les pages PDF. Pour garantir que le document PDF correspond à la taille du conteneur, nous utilisons également la méthode getBoundingClientRect() dans l'API Web pour calculer dynamiquement la hauteur de l'élément canevas.

Render PDF page

Dans la méthode renderPage du composant, nous utilisons la méthode getPage de pdf.js pour obtenir des informations pertinentes sur la page spécifiée. Nous utilisons ensuite la méthode getViewport pour obtenir l'état d'affichage de la page PDF et utilisons la largeur du conteneur actuel pour calculer le facteur de zoom. Enfin, nous utilisons la méthode render pour restituer la page dans l'élément canvas.

Implémenter la hauteur adaptative

Pour implémenter la hauteur adaptative du composant de visualisation PDF, nous devons définir dynamiquement la hauteur de l'élément canevas lors du rendu de la page PDF afin qu'elle corresponde à la hauteur de la page.

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

Veuillez noter que dans le style CSS ci-dessus, nous définissons la hauteur de l'élément canevas sur auto, ce qui garantira que la hauteur de l'élément canevas est proportionnelle à sa largeur. Nous limitons ensuite la hauteur maximale de l'élément canvas à la hauteur de son élément parent en utilisant l'attribut max-height. Cela garantira que la hauteur de la page PDF ne dépasse pas la hauteur du conteneur du composant.

Utilisation du composant PDF Viewer

Maintenant, nous avons créé un composant de visualisation PDF appelé PDFViewer et implémenté la fonction de hauteur adaptative. Pour les applications Vue.js qui doivent charger des fichiers PDF, nous pouvons désormais utiliser le composant des manières suivantes :

<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>

Dans l'exemple de code ci-dessus, nous ajoutons le composant PDFViewer au modèle de l'application Vue.js et chargeons le PDF. file L'URL est transmise au composant en tant qu'accessoire.

Résumé

Dans cet article, nous avons appris à utiliser pdf.js pour créer un composant de visualisation PDF Vue.js et implémenter la fonction de hauteur adaptative. En utilisant pdf.js, nous pouvons facilement intégrer des fichiers PDF dans des applications Web sans utiliser de plugins ou d'autres outils tiers.

Veuillez noter que lorsque vous utilisez pdf.js pour restituer des fichiers PDF volumineux, cela peut affecter les performances et le temps de chargement de votre application Web. Par conséquent, lorsque vous utilisez les méthodes décrites dans cet article, vous devez envisager d'utiliser des techniques telles que le chargement différé pour optimiser le processus de chargement et de rendu des fichiers PDF.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!