使用Vue.js輕鬆實現PDF文件在線預覽

PDF文件是一種廣泛使用的文件格式，常用於電子書、合同、報告、表格等文檔的製作和分享。在Web應用中，為了方便用戶直接在線預覽和瀏覽PDF文件，我們可以使用Vue.js輕鬆實現這個功能。在本文中，我們將從以下方面詳細闡述如何使用Vue.js實現PDF文件在線預覽功能。

一、選取需要預覽的PDF文件

在Vue.js應用中，我們需要提供選取PDF文件的功能。通過使用element-ui提供的Upload組件，我們可以方便的實現文件上傳功能。建立一個上傳組件，並配置相關參數：

<template>
  <div class="uploadBox">
    <el-upload
      ref="upload"
      action="http://localhost:3000/upload"
      :on-success="handleSuccess"
      :file-list="fileList"
      :auto-upload="false"
      :multiple="false"
      :before-upload="beforeUpload"
      class="upload-demo"
      :show-file-list="false">
      <el-button slot="trigger" size="small" :loading="uploading">選取文件</el-button>
      <span slot="tip" class="uploadTip">支持PDF文件格式</span>
    </el-upload>
  </div>
</template>

其中，Upload組件的action屬性指定文件上傳的地址，這裡我們使用了本地服務器3000端口。file-list屬性綁定一個數組，裏面存儲着已經選中的PDF文件。auto-upload和multiple屬性分別表示選取完文件後是否立即上傳和是否可以一次選取多個文件。before-upload方法在開始上傳之前做的一些驗證，這裡我們驗證了只允許上傳PDF文件。

二、使用pdf.js進行PDF文件渲染

pdf.js是Mozilla開源的一個支持渲染PDF文件的JavaScript庫。我們可以利用這個庫對PDF文件進行渲染。首先在Vue.js應用中引入pdf.js庫：

<script src="https://mozilla.github.io/pdf.js/build/pdf.js"></script>

然後在Vue.js組件中定義一個canvas元素，並獲取canvas的渲染上下文，用來渲染PDF文件的頁面：

<template>
  <div class="pdfViewer">
    <canvas ref="pdfViewer"></canvas>
  </div>
</template>

<script>
export default {
  mounted() {
    this.renderPDF();
  },
  methods: {
    async renderPDF() {
      const canvas = this.$refs.pdfViewer
      const context = canvas.getContext('2d')
      const loadingTask = pdfjsLib.getDocument(this.pdfUrl)
      const pdf = await loadingTask.promise
      const page = await pdf.getPage(1)
      const viewport = page.getViewport({ scale: 1 })
      canvas.height = viewport.height
      canvas.width = viewport.width
      const renderContext = {
        canvasContext: context,
        viewport: viewport
      }
      await page.render(renderContext);
    }
  }
}
</script>

這裡我們使用了pdfjsLib這個庫來加載PDF文件，並獲取需要渲染的頁面。通過getViewport方法獲取頁面的Viewport對象（包含頁面大小和縮放比例等信息），然後通過render方法將頁面渲染到canvas上。這樣，我們就可以在網頁中實現PDF文件的預覽功能。

三、完整的代碼示例

下面是完整的Vue.js組件代碼示例，包含了上傳PDF文件和渲染PDF文件的功能。

<template>
  <div class="pdfViewer">
    <canvas ref="pdfViewer"></canvas>
    <div class="uploadBox">
      <el-upload
        ref="upload"
        :action="uploadUrl"
        :on-success="handleSuccess"
        :file-list="fileList"
        :auto-upload="false"
        :multiple="false"
        :before-upload="beforeUpload"
        class="upload-demo"
        :show-file-list="false">
        <el-button slot="trigger" size="small" :loading="uploading">選取文件</el-button>
        <span slot="tip" class="uploadTip">支持PDF文件格式</span>
      </el-upload>
    </div>
  </div>
</template>

<script>
import * as pdfjsLib from 'pdfjs-dist'
export default {
  data() {
    return {
      pdfUrl: '',
      fileList: [],
      uploading: false,
      uploadUrl: 'http://localhost:3000/upload'
    }
  },
  mounted() {
    this.renderPDF()
  },
  methods: {
    async renderPDF() {
      const canvas = this.$refs.pdfViewer
      const context = canvas.getContext('2d')
      const loadingTask = pdfjsLib.getDocument(this.pdfUrl)
      const pdf = await loadingTask.promise
      const page = await pdf.getPage(1)
      const viewport = page.getViewport({ scale: 1 })
      canvas.height = viewport.height
      canvas.width = viewport.width
      const renderContext = {
        canvasContext: context,
        viewport: viewport
      }
      await page.render(renderContext)
    },
    handleSuccess(response, file, fileList) {
      this.pdfUrl = response.path
      this.fileList = fileList
      this.renderPDF()
    },
    beforeUpload(file) {
      const isPDF = file.type === 'application/pdf'
      if (!isPDF) {
        this.$message.error('只能上傳PDF文件')
      }
      return isPDF
    }
  }
}
</script>

以上就是使用Vue.js輕鬆實現PDF文件在線預覽的方法和步驟。通過引入pdf.js庫，我們可以輕鬆的實現PDF文件的渲染。在Vue.js應用中，我們可以通過element-ui的Upload組件提供上傳PDF文件的功能。最終實現一個完整的PDF文件在線預覽功能。希望本文能夠幫助大家。