使用Vue進行PDF預覽的方法

現今PDF是我們最為常用的文檔格式之一，因此如何在我們的應用程序中快速、方便、高效地進行PDF預覽就成為了非常重要的一個功能，而Vue.js則是一個非常流行的前端框架之一，下面我們就來詳細了解使用Vue進行PDF預覽的方法。

一、安裝相關依賴

在使用Vue進行PDF預覽之前，我們需要首先安裝相關的依賴，包括vue2、pdf.js、pdf.worker.js。其中，pdf.js和pdf.worker.js是支持讀取和渲染PDF文件的重要庫。

npm install vue2 --save
npm install pdfjs-dist --save
npm install pdfjs-dist/build/pdf.worker.js --save

二、創建Vue組件

在開始創建Vue組件之前，需要先在Vue中引入pdf.js和pdf.worker.js。通過webpack配置別名可以輕鬆完成這項任務。

resolve: {
  alias: {
    'vue$': 'vue/dist/vue.esm.js',
    'pdfjs-dist': 'pdfjs-dist/webpack.js',
    'pdf.worker': 'pdfjs-dist/build/pdf.worker.entry.js'
  }
}

接下來，我們需要編寫Vue組件，首先導入所需依賴。

<template>
  <div class="pdf-viewer">
    <div class="pdf-toolbar">
      <button @click="prevPage">上一頁</button>
      <button @click="nextPage">下一頁</button>
    </div>
    <div class="pdf-container">
      <canvas ref="canvas"></canvas>
    </div>
  </div>
</template>

<script>
import pdfjsLib from 'pdfjs-dist/webpack'
import Worker from 'pdfjs-dist/build/pdf.worker.entry'

pdfjsLib.GlobalWorkerOptions.workerSrc = Worker

export default {
  name: 'PdfViewer',
  props: {
    src: {
      type: String,
      required: true
    }
  },
  data () {
    return {
      pdfDoc: null,
      pageNum: 1
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.renderPage(this.pageNum)
    })
  },
  methods: {
    async loadPdf (src) {
      const pdf = await pdfjsLib.getDocument(src).promise
      this.pdfDoc = pdf
    },
    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 })

      canvas.height = viewport.height
      canvas.width = viewport.width

      const renderContext = {
        canvasContext: ctx,
        viewport: viewport
      }
      await page.render(renderContext)

      if (this.pageNum !== num) return
    },
    async prevPage () {
      if (this.pageNum <= 1) return
      this.pageNum--
      await this.renderPage(this.pageNum)
    },
    async nextPage () {
      if (this.pageNum >= this.pdfDoc.numPages) return
      this.pageNum++
      await this.renderPage(this.pageNum)
    }
  },
  watch: {
    async src (newVal) {
      await this.loadPdf(newVal)
      await this.renderPage(this.pageNum)
    }
  }
}
</script>

三、使用Vue組件進行PDF預覽

在完成Vue組件的定義後，我們就可以在應用程序中使用它了。此時需要在Vue模板中引用剛剛編寫的組件，並傳遞有效的PDF鏈接地址到組件中。

<template>
  <pdf-viewer :src="pdfUrl"></pdf-viewer>
</template>

<script>
import PdfViewer from './components/PdfViewer'

export default {
  name: 'App',
  components: {
    PdfViewer
  },
  data () {
    return {
      pdfUrl: 'https://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf'
    }
  }
}
</script>

四、總結

本文主要介紹了如何使用Vue.js進行PDF預覽，並說明了相關的依賴和步驟。在實際開發中，我們可以將該功能集成到多種Vue應用程序中，以滿足不同的業務需求。