Vue3-pdfjs: 基於Vue 3的PDF庫

一、介紹

Vue3-pdfjs是一個用於在Vue3項目中顯示和操作PDF文件的庫。它基於pdfjs-dist庫，為Vue3提供了一個PDF渲染組件，並且提供了一系列API來方便地操作PDF文件。該庫提供了多種方式來顯示PDF文件，例如將整個PDF作為單獨的頁面顯示，或者將PDF文件分割成多個頁面以供單獨呈現。Vue3-pdfjs經過優化，具有很好的性能和可靠性，適合在各種類型的Web應用程序中使用。

二、安裝

在使用Vue3-pdfjs之前，我們需要在項目中安裝它。使用npm進行安裝：

$ npm install vue3-pdfjs

安裝完成後，我們可以在項目的Vue組件中引入Vue3-pdfjs：

import { pdf } from 'vue3-pdfjs'

三、使用

1. 顯示整個PDF文件

我們可以使用PDF組件來顯示整個PDF文件，這樣就能呈現出PDF的每一頁。在Vue組件中添加以下代碼：

<template>
  <pdf
    :src="pdfUrl"
    :page="pageNumber"
    :options="options"
    @page-rendered="handlePageRendered"
  />
</template>

<script>
import { ref } from 'vue'
import { pdf } from 'vue3-pdfjs'

export default {
  name: 'PDFViewer',
  components: {
    pdf
  },
  setup () {
    const pdfUrl = ref('/pdf/test.pdf')
    const pageNumber = ref(1)
    const options = ref({
      scale: 1
    })

    const handlePageRendered = (e) => {
      console.log('Page rendered: ', e)
    }

    return {
      pdfUrl,
      pageNumber,
      options,
      handlePageRendered
    }
  }
}
</script>

在上述示例中，我們使用了Vue的ref來聲明變數並使用pdf組件渲染整個PDF文件。我們也可以通過指定頁碼和縮放等選項來控制PDF的參數。同時，我們可以使用page-rendered事件來監聽PDF中每一頁的渲染情況。

2. 顯示單個PDF頁面

如果我們只需要呈現PDF文件中的特定頁面，我們也可以使用PDFPage組件。在Vue組件中添加以下代碼：

<template>
  <pdf-page
    :src="pdfUrl"
    :pageNumber="pageNumber"
    :scale="scale"
    :rotate="rotate"
    :options="options"
    @page-rendered="handlePageRendered"
  />
</template>

<script>
import { ref } from 'vue'
import { pdfPage } from 'vue3-pdfjs'

export default {
  name: 'PDFPageViewer',
  components: {
    pdfPage
  },
  setup () {
    const pdfUrl = ref('/pdf/test.pdf')
    const pageNumber = ref(1)
    const scale = ref(1.5)
    const rotate = ref(0)
    const options = ref({
      disableAutoFetch: false
    })

    const handlePageRendered = (e) => {
      console.log('Page rendered: ', e)
    }

    return {
      pdfUrl,
      pageNumber,
      scale,
      rotate,
      options,
      handlePageRendered
    }
  }
}
</script>

與PDF組件類似，我們可以使用PDFPage組件來呈現單個頁面。此外，我們可以通過設置rotate和scale等選項來控制PDF頁面的渲染值。

3. 使用API操作PDF

除了呈現PDF文件之外，Vue3-pdfjs還提供了一系列API來方便地操作PDF文件。我們可以在Vue3組件中使用這些API來執行各種操作，如獲取PDF中的文本、縮放、旋轉等操作。

<template>
  <div>
    <pdf
      :src="pdfUrl"
      :page="pageNumber"
      :options="options"
      @page-rendered="handlePageRendered"
    />
    <button @click="getText">獲取文本</button>
  </div>
</template>

<script>
import { ref } from 'vue'
import { pdf } from 'vue3-pdfjs'

export default {
  name: 'PDFTextField',
  components: {
    pdf
  },
  setup () {
    const pdfUrl = ref('/pdf/test.pdf')
    const pageNumber = ref(1)
    const options = ref({
      scale: 1
    })

    const handlePageRendered = (e) => {
      console.log('Page rendered: ', e)
    }

    const getText = () => {
      pdf.getDocument(pdfUrl).then(pdf => {
        pdf.getPage(1).then(page => {
          page.getTextContent().then(textContent => {
            console.log(textContent.items)
          })
        })
      })
    }

    return {
      pdfUrl,
      pageNumber,
      options,
      handlePageRendered,
      getText
    }
  }
}
</script>

在上述示例中，我們使用了Vue的Promise來獲取PDF文件中的文本。我們通過調用pdf.getDocument()方法來打開PDF文檔，然後使用pdf.getPage()方法獲取PDF中的特定頁面。最後，我們調用page.getTextContent()方法來獲取頁面中的文本內容。

4. 其他的方法和選項

除了上述列出的方法和選項之外，Vue3-pdfjs還提供了各種選項和API來控制和操作PDF。例如，我們可以使用disableWorker選項來控制是否啟用PDF.js的內置Worker。如果我們在使用Vue的SSR模式時遇到問題，我們可以使用disableAutoFetch選項來禁用內部自動獲取PDF文件的功能。

<pdf
  :src="pdfUrl"
  :page="pageNumber"
  :options="{ disableWorker: true, disableAutoFetch: true }"
/>

四、結論

Vue3-pdfjs是一個方便、易於使用和高性能的Vue 3 PDF庫。它提供了多種方式來顯示PDF文件和操作PDF文件，適用於各種類型的Web應用程序。結合Vue3的強大功能，Vue3-pdfjs能夠輕鬆地為您的項目添加PDF文檔渲染和處理功能。