Bagaimana untuk melaksanakan ketinggian penyesuaian pdf dalam vue

Vue.js telah menjadi salah satu rangka kerja JavaScript yang paling popular dalam pembangunan web moden. Jika anda sedang membangunkan aplikasi Vue.js yang perlu memuatkan fail PDF, masalah biasa yang mungkin anda hadapi ialah ketinggian komponen PDF tidak menyesuaikan diri seperti elemen HTML yang lain.

Dalam artikel ini, kami akan meneroka cara melaksanakan komponen pemapar PDF ketinggian penyesuaian dengan menggunakan pustaka JavaScript yang dipanggil pdf.js.

Apakah itu pdf.js?

pdf.js ialah perpustakaan JavaScript sumber terbuka yang dibangunkan oleh Mozilla yang boleh memaparkan fail PDF terus dalam penyemak imbas web tanpa menggunakan pemalam. Pustaka ditulis sepenuhnya dalam JavaScript dan berdasarkan teknologi HTML5 Canvas dan Web Workers.

pdf.js mempunyai banyak ciri, termasuk pemapar PDF penuh, pemilihan dan carian teks, pratonton lakaran kecil dan banyak lagi, serta boleh dibenamkan dengan mudah ke dalam mana-mana aplikasi berasaskan web.

Melaksanakan ketinggian penyesuaian PDF

Kini kami akan memperincikan cara menggunakan perpustakaan pdf.js untuk melaksanakan komponen pemapar PDF yang menyesuaikan diri dengan ketinggian bekas induknya.

Pasang pdf.js

Untuk menggunakan pdf.js, anda perlu menambahkannya pada projek Vue.js anda terlebih dahulu. Anda boleh memasang pdf.js menggunakan npm dengan melaksanakan arahan berikut.

npm install pdfjs-dist

Buat komponen PDF

Dalam projek Vue.js anda, buat komponen baharu yang dipanggil 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>

Dalam komponen PDFViewer ini, fungsi yang paling penting yang kami gunakan ialah fungsi pdfjsLib.getDocument(src), yang memuatkan dokumen PDF daripada URL yang disediakan dan mengembalikan objek Dokumen. Kami juga mentakrifkan pembolehubah dipanggil pageNum untuk menyimpan nombor halaman yang ingin kami paparkan, dan pembolehubah dipanggil totalPages untuk menyimpan jumlah halaman dalam dokumen PDF.

Dalam cangkuk kitaran hayat yang dipasang komponen, kami memanggil kaedah loadPDF untuk memuatkan dokumen PDF dan mula memaparkan halaman pertama. Selain itu, kami menggunakan elemen kanvas untuk memaparkan halaman PDF. Untuk memastikan dokumen PDF sesuai dengan saiz bekas, kami juga menggunakan kaedah getBoundingClientRect() dalam API Web untuk mengira ketinggian elemen kanvas secara dinamik.

Render halaman PDF

Dalam kaedah renderPage komponen, kami menggunakan kaedah getPage pdf.js untuk mendapatkan maklumat berkaitan halaman yang ditentukan. Kami kemudian menggunakan kaedah getViewport untuk mendapatkan keadaan paparan halaman PDF dan menggunakan lebar bekas semasa untuk mengira faktor zum. Akhir sekali, kami menggunakan kaedah render untuk menjadikan halaman menjadi elemen kanvas.

Laksanakan ketinggian penyesuaian

Untuk melaksanakan ketinggian penyesuaian komponen pemapar PDF, kita perlu menetapkan ketinggian elemen kanvas secara dinamik semasa memaparkan halaman PDF supaya ia sepadan dengan ketinggian halaman.

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

Sila ambil perhatian bahawa dalam gaya CSS di atas, kami menetapkan ketinggian elemen kanvas kepada auto, yang akan memastikan ketinggian elemen kanvas adalah berkadar dengan lebarnya. Kami kemudian mengehadkan ketinggian maksimum elemen kanvas kepada ketinggian elemen induknya dengan menggunakan atribut ketinggian maksimum. Ini akan memastikan ketinggian halaman PDF tidak melebihi ketinggian bekas komponen.

Menggunakan Komponen Pemapar PDF

Kini, kami telah mencipta komponen pemapar PDF yang dipanggil PDFViewer dan melaksanakan fungsi ketinggian penyesuaian. Untuk aplikasi Vue.js yang perlu memuatkan fail PDF, kami kini boleh menggunakan komponen dengan cara berikut:

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

Dalam contoh kod di atas, kami menambah komponen PDFViewer pada templat Vue. js application , dan hantar URL fail PDF kepada komponen sebagai prop.

Ringkasan

Dalam artikel ini, kami mempelajari cara menggunakan pdf.js untuk mencipta komponen pemapar PDF Vue.js dan melaksanakan fungsi ketinggian penyesuaian. Dengan menggunakan pdf.js, kami boleh membenamkan fail PDF dengan mudah ke dalam aplikasi web tanpa menggunakan pemalam atau alatan pihak ketiga yang lain.

Sila ambil perhatian bahawa apabila menggunakan pdf.js untuk memaparkan fail PDF yang besar, ia mungkin memberi kesan kepada prestasi dan masa muat aplikasi web anda. Oleh itu, apabila menggunakan kaedah yang diterangkan dalam artikel ini, anda harus mempertimbangkan untuk menggunakan teknik seperti pemuatan malas untuk mengoptimumkan proses pemuatan dan pemaparan fail PDF.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan ketinggian penyesuaian pdf dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!